Full text of "Web Designer Magazine 2012 Full Complete Year"

See other formats

Special guest editor

MattMullenweg

The king of CSS speaks

Eric Meyer

/ *

“Flash is dead,
so let’s build a
better internet”

Patrick Van Kann, R/GA

PLUS

30+ pages of
pro tutorials

Soleil Noir
Pro File special

Over 10 hours
of video tutorials

# heart interne

Create your own custom

vCPU HDD

RAM

Fully scalable and customisable

Your VPS specs can be modified on the
fly to ensure you can meet any sudden
changes in demand or popularity.

VPS without compromises

Affordable yet high-quality VPS hosting
without compromise. We use branded
Intel processors and Dell servers in our
UK data centre*

Advanced virtualisation technology

KVM is the latest generation of virtualisation
technology, offering high-performance
access to server resources for both Linux and
Windows virtual private servers.

From only £11.99 per month

✓ 24/7 UK Support

✓ Free & Instant Setup

✓ 99.99% Uptime SLA

✓ Full root access

Find out more: www.heartintemet.co.uk
Call us: 0845 644 7750

# heart internet

www.heartinternet.co. uk

web hasting I Reseller hasting I VP$ I Servers

Jh.

<nu>Ui>

— Guest editor- —

Welcome
to200!

M To be the most accessible and | V f
inspiring voice for the industry, ' / 1

I offering cutting-edge features
L and techniques vital to

building future-proof Matt

online comon; #» Mullenweg

welcome |

The web is a first-class development platform

i: eb Designer magazine started in
1997 when the hot topics were
searching with AltaVista, Dynamic
HTML, and HotWired WebMonkev
was hand-coded with bbEdit. I was in
middle school, 200 issues later, an
impressive teat tor any publication,
and the names and the technologies
have changed, but the passion that designers and
developers have tor creating the web as a craft is the
same (and WebMonkev now uses Word Press),

Today the web has become a first-class development
platform. Forget about nudging single-pixel GIFs and
abusing tables - that's in the past - today you can build
an app with open-source tools and there are almost a
billion people a dick away. There's never been anything
like that in the history of our species, but what are you
going to do with it?

With great power comes great responsibility,
especially fortesting. Vou'il notice a 'good chunk of the
carefully-assembled 200 must-have tools starting on
page £4 are either dedicated to testing your creation.

like Firebug and Browsershots, or libraries and services
that normalise cross-platform differences like Twitter
Bootstrap, Typekit, jQuery, and Modernizr. I'm honoured
to be included in the list with WordPress, as well as
being the guest editor for this issue.

Although there's much more to be excited about this
issue, I have to mention the five questions with Enc
Meyer starting on page 42. This is a special delight for
me because Eric fond his css-discuss list) were my first
introductions to modern web design. I had read
Zeldman's Taking Your Talent to the Web and started to
dabble, but still struggled with CSS layouts. I posted a
question to css-discuss one hot August day from
Houston, and within a few hours Mr Meyer himself had
replied - helping me bottorn-align an image in a block
element, thereby setting off a chain of events that led to
me being passionate about web standards, meeting Eric
atSXSW about a year later, and starting Word Press. I
don’t think I've said it before, so: thank you. Eric. It's a
story to keep in mind next time you find yourself
helping someone with a tech-related issue...

Matt Mullenweg

Highlight

iiifi We
mustn’t put
our eggs in one
basket with
one software
solution M

Web Designer takes
the short hop over the
Er^hsh Channel to
Paris to talk to French
web architects Soleil
tor They reveal a love
of Flash and coffee.,
and how they keep
their oeaLfve integrity
by not doing sales
strategies. Page 36

f f Today you can build an app with open-source tools m™ over to the contents to

, ., discoverwhat’s going to get

and there are almost a billion people just a click away w w you excited mis issue

Follow us on Twitter for all the news & conversation 3 @WebDesignerMag
Visit our blog for opinion, freebies & more© www.webdesignermag.co.uk

meta

| contributors

This issue’s panel of experts

Welcome to that
bit of the mag
where we learn
more about the
featured writers
and contributors.

G4 An exclusive
insight to the past,
present and future
of WordPress

The WordPress ra-faunder not only takes the helm as guest editor far our
special 200th issue but he also gives us an exclusive insight to the past
present and future of WordPress. To top it all off he recommends a host of
WordPress tools and themes plus his favourite third-party apps, Page 20

Sam Hampton-Smith Louis Lazaris Louis Simoneau

Sam loves getting the most
out of HTML and CSS. Thts
month he creates a
real time fmend-finder app.
m pert one of lib tutor ial he
uses H T ML5"s gedocattcn
API tcMjah share and
update your position utsing
QpenStreetMaQ Page 6-B

Louis writes regularly for a
number of top design blogs,
including his own site
Impressive Webs. In this
issue's lead feature he
I unveils a collection erf some
I of the best tools on the web-

that every designer needs in
their arsenal. Page 44

Louis slings Ruby on Rails
for Flippy, and hosts the
SitePc«nt podcast, This issue
he has a dose-up look at Git
and GltHub. He reveals how
version control works and
why designers need to be
fully aware of these two

very popular tools Page a?

Matt Giffo rd Marks huf f lebottom Ben Fraln

J — I Matt Gifford is a lead RlA
B. consular*developer and
H industry author, who
B specialises in ColdFusion.

C Flash and AIR development,
mis month he

■ demonstrates how to build
a URL shortener with Ruby
and Smatra. Page 88

Mark ShLtf lebdttom is the
programme leader cf BA
(Hons) Digital Media Design
at Bournemouth University;
in this issue he tackles the
an of creating an interactive
3D navigation system using
the JavaScript rendering API
WebGL. Page 54

Ben Frain is a freelance
front-end developer and
tech writer. He is also the
author of 'Responsive wab-
-jcsign with HTML5 £ CSS3'.
This issue he tells us how to
serve hi-res images to high
defin<ion displays such as
the new 1 Pad. FageSfl

Tliord Daniel Hederigren Pete Simmons

Known as TDH Tor short.
Thcrd is an author and
freelance fOurnaHsLas well
as a huge succcuter of
coen source software. He
ha* writ ten several books
on WordPress and runs the
Odd Alice wefc agency in
Stockholm. Page 65

Pete is a digital marketing
manager for Llcnhead
Studios. He specialises in
fr-oht end development, PUP
and social APIs. This mcnih
Pete tackles the Facebook
Graph APi and shows how
to integrate images and
data Into a website. Page 92

meta

Got
web skills?

We’re always looking for the d
hottest web-design talent. Email ^

^ webdesiqnenBimaqin e-pub lishinq.co.uk

with examples of your creative work

Imagine Publishing LJtd J
Richmond House, 33 Richmond Hill
Bournemouth, Dorset, BH2 6EZ

+44 (0)1202 5B620Q
Web: www. imaeme-publ iahing.co.uk
www,webdesianenriag.CQ. uk

www,gr&atdigita lmags.com

Magazine team

Editor Russell Barnes

russeii.barne5igimaglne-i)wt>ilshinfl.cQ.vh

Q12Q2 69B272

Editor In Chief Dave Harfield
Features Editor Steve Jenkins

steftrE.ienktnsffinTagjne-publishingjCQ.uk

01202 SS6233

Designer Daniel Duke

Senior Sub Editor Adam Mill ward

Sub Editor Ben Martin

Head of Publishing Aaron Asadi

Head of Design Ross Andrews

Contributors

Mail Gifford, Sam Ha Wlo# Smith, Thord D Hedcn£ren,
Dttvid Howell, Robin De Jorgh. Louis L&cSris, Vicky MtFSrlans,
M&LL Mullerrwefi. Jake RuLLer. Mark Shutnebir.Jom,

Feie Simmons, Louis Smoneau & Adam Smith
Advertising

Digr.al or printed nredia packs are available on request.
Head of Sales Hang Derecz
01202 580442

hilnf .rl+iTil/PinWinri mihliiihinF.nn.i ik

Athertfalng Manager George Lutes
01202586421

awrAe.lurjwjgliiiaftirifipiiilishiiTfl.m.uk

5e n I or Account Manager Nick Marrow
01202 53S419

nick.marrpwffitrTagine-puhlishintljCQ-uk

Cover disc

Head of DigiM Mat l^r

Digital Prefects Co-Hwdinsrtw Steven yitcht

Multimedia &*Hcw Matt Deeble

WDximhd pgimafiine publishirig.co.uk

Internationa]

Web Destgnetr is available for licensing. Contact the
In-en-ia-jonal department to discuss opportunities.

Mead inf International Licensing Carthy Blackman
+44 <ori 1202 5864Q1
licensinegimagine ptblishine.ou.uk

Subscriptions

Head at Subscriptions Lucy Nash

suhscnptionsSimagiftepublishing.co.uk

To orders subscription _ .a Web Designer
0844 84S&413 144 1795 592 STB

Email: - webdesignerffiservicghalpli ne.co.uk
13-issue subscription (UK) -£62.30
13-issue subscription (Europe! - £70
13"iSSue SubSCripti« (ROW) £80
Circulation

Head uf Circulatiun Dar ren Pearce
01202 5R&2CX1

Production

Production Director jane Haiwkins
U- 01202 586200
Founders

GhuCp Managing Director Damian Butt

Grntlp Finance A Cummtrc ial Directulr Sreven Enyd

GrtiUp Creative Director Mark Kendrick

Printing & Distribution

primed by Wyndeliam Ke«otn, LW. BetifaDs Comjstfeac,

Colchester Road, Heybridge, Maldon, Essex CM9 4NW

Distributed in the UK tit Eire by Seymour Distribution. 2 East
Poultry Avenue, London, |C1 A 9PT 0207 429 4000

Distributed In Australia tty Gordon ft fioreh. Equinox
Centre, 18 Rodborough Road, Frenchs Forest. NSW 2086
612 9973 fifiOD

Eristnbuted In Rest o1 the World try Marketfarce, Blue
Rn Building. 110 Southwark S-jee:. London SE1 OSU
D2tril48BlB6

Disclaimer

I he piJdl sl-ercannct accept resin until tv tar any unsolicited material
Intf a rtar-vjgcd m flag post. All mid layout Is tit mfr g}r. nr

inetnePutUiib^jo. H«hitign;iii! -■ lyodueet)

in whoia or pan wtftout Uw wrttim pwawsioii of tie pUtilWrw,

Ail capiiTfitr.s ere rrccfiTi aed and used specfitel^ Tuf Uie purpose
uf cr^jcism atd nevieM. AJUnoug.h the ma^az re has endaoiTcred
to o-iwiip n I In tom In n It ciirroet at :lmn at print, pr kcs. utkI
^aiebittjfnifljfchan*e Ttisi-naozinaialUbkrteperHlamarKli
ttU.dlftlidljet) riant nuv wilt the couponrsneriLtmed Iterert.

H Itriigl*R.fciFJ-iift 1 tdI'

3SWW73534

|||]

PPA

U H (^recyd

IMAGiM ■

PUBLISHING

WH*v y&r twrr* Firiihad »>*l

HP recommends Windows® 7 Professional.

Introducing the new HP Z1 Workstation.
Power without the tower.

The all-in-one HP Z1 Workstation with the Intel® Xeon® processor
E3-1200 series.

To find out more about the HP Z1 Workstation visit

hpxo.uk/Z1 or coll 0645

$2012 Hewlett-Packard Development Company, l,P- The Information contained he*ein is subject to change without notice.

Intel, Intel logo Intel Intel Inside, logo, Intel Inside, Neon and Xecn Inside are trademarks of Intel Corporation in the United States, and other countries,
Microsoft and Windows ore trademarks of the companies Microsoft.

<meUi>

Inside issue 200

contents

Cutting-edge features, techniques and inspiration for web creatives

Chat with the team and other readers and discuss the latest tech, trends and techniques. Here's how to stay in touch...

O webdesianer@imaaine-publishina.co.uk Q@WebDesianerMaa C> www.webdesianermaa.co.uk

Insider.. -

20 Interview: Matt Mullenweg

The WordPress co-founder and issue 200
guest editor shares his vision of the future

26 Lightbox

Three sites that make the web a better place
including work from Hello Monday

32 Design diary: Firstborn

This month's design diary sees us riding the
development cycle of 'experience Sony'

36 Pro File: Soleil Noir

This month we spend time with French
creative giants Soleil Noir

42 Interview: Eric Meyer

We snatch five questions with the king of CSS!

44 Coven 200 tools & trends

What are the most important tools in web
design today? Our experts reveal theirs

96 Portfolio

Three more rising stars in the web world

104 Hosting listings

Check out the latest domain-based deals

114 Style relic; Vimeo

How has Vimeo changed since 2004?

<lieack*r>

Discussing the hottest topics
from the web-design world

8 15 years and counting!

Take a journey through the evolution and
revolution of web design

14 Crowdsource

We respond to your latest letters and tweets

16 Comment: Beniamin Boiko

Does abstraction kill curiosity? Big Spaceship
technologist, Bojko, seems to think so

17 Comment: Devin Silberfein

2Advanced CEO Silberfein on getting the most
out of working with nightmare clients

18 Comment: Patrick Van Kann

Once director of engineering at the Walt Disney
Company, Van Kann explores life after Flash

Cover focus

Matt Mullenweg speaks

Exclusive interview with the WordPress co-founder

l 'he go to expert tor Cbb on what the l mure holds

Pro File; Soleil Noir

Behind the scenes with the French creative giant

meta

On the free CDs I <tutorials>

112 Discover what your special issue discs have to offer

A comprehensive collection
of free designer resources!

• 10+ hours of pro video tutorials

• 200 essential tools & trends

• 20 WordPress themes

• 10 cheat sheets & much more!

I Get interactive with WebGL

kJJJ.ldU.Cl DOCUMENTATION
CONTRIBUTE
CODE
CREW
ABOUT

Put this in

your pipe "yK'Jk,.

and smoke it ! r-T" - *' 'Tl. —.

88 58

Build a bespoke brand Are vou retma-readv?

Add a U RL shortner to your repertoire Serve hi res images to your audience

Web workshop

74 Get creative with
CSS transitions
Mark Shuffle bottom
u ses Julienrenvoye.com to
demonstrate how clean,
Flash-like transitions can be
achieved in CSS

76 Mainstream
banner styles
Adam Smith looks at one of the
most important aspects of any
web project, the banner, using
some classic examples

Web gurus take you step-by-step
through professional techniques

54 Create an interactive 3D interface
with WebGL

Harness the power of the hardware accelerated, native
3D graphics engine for browsers

58 Serve images to high-res screens

Take advantage of HD and Retina display screens to
make your site a cut above the rest

62 Make tabbed boxes with multiple
loops for Word Press

Add a tabbed box with content from ser veral categories to
your Wordpress theme

68 Build an HTML5friend-finding app:
parti

Learn bow to capitalise on geolocation technology with
the first part of our new series

r (UJ8b-

{developen

Dedicated 14-page section offering
features and tutorials for coders

Feature

A crash course in Git

Get to grips with GibHub. the ultimate collaboration
tool for all kinds of developers

88 Build a URL shortner

Make an Impact with your brand with your own
bespoke URLs

92 An introduction to the
Facebook Graph API

Howto access the data behind Facebook and
integrate it Into your web projects

meta

news
comment
crowd source

header

Discussiiig the hottest topics in the web-design world

If you have a creative project new web product or great designer story contact the editorial desk

O webdesiqner@imaqine-publishinq.co.uk 0@WebDesiqnerMaq

15 years and
counting

Web Designer first hit the shelves
in 1997 when the web was a very
different place. Here we take a
journey through the evolution
and revolution of web design

i .JIBU » jvt— 1

ISSUE 153

ONSALE 2009

wL,

— 1

ON SALE 2006

2 00issues. 15 years and millions of lovingly crafted words. Tne lifespan of a
magazine seldom reaches such a substantial figure, but Web Designer has
undoubtedly achieved a significant milestone. And along the way there have
been some seism £ changes in web design across the board.

The world's first website is credited to Tim Berners-Lee, boasting the URL http://
irfo.cernxh. So back in December 1990, the internet had a population of one. By the
end of 1991 the figure had risen to ten; at the dose of 1992 it had reached 50, and a
year later it had hit 623. Figures started to take a much bigger jump over the next
couple of years. Indeed, by the end of 1994. websites
had reached five figures, with just over 10.000. By
tiie beginning of 1996 another milestone was
reached as the 100,000 mark was passed. The
growth in the intervening years has been massive -
indeed, in less than ten years the web went from
100,000 to around 100 million, and in the last five
years from 100 million to over half a billion.

Along the way technologies, techniques and
trends have made huge strides in bringing the web
to where it is today HTM15. CSS3 and jQuery are the
current ruling triumvirate of web design, but back in
1997 when Web Designer took its first steps into the
market, things were a little different...

HTML has always been the major building block,
but it was a different beast when HTML3 launched In
1995. HTML3 soon became HTML4 in 1997 and
introduced a host of tags and recommendations that
many have grown up with. The logical progression was HTMLS.and almost ten years
later a working draft was introduced. Semantic tags and a whole new set of APIs
have made HTML more powerful than ever - and it's not even finished yet

HTML's now constant companion - CSS - hasn't always been by its side. Page
styling was once dominated by tables and nested tables, inline styling. Flash
animation and a very small collection of system fonts. Even frames and framesets
were popular, but looking back it's hard to think why. Building pages was a painful

enough experience, and updating often proved even
more irritating. If animation was needed. DHTTMl and
Flash were the folks to call on. The lack of font
support meant that graphics were still the key
component for creating headline-grabbing text.

Thankfully. CSS revolutionised web design and
unleased the power of stylesheets. CSS had a
plethora of plus-points, but as always browser
support made sure that it would take a while to gam
traction, The introduction of CSS3 has seen designers
say goodbye to the old and hello to a new and much
more powerful version of the styling language, one
that is only now starting to fulfil its potential.

The new specifications, along with jQuery. have
slowly pushed Flash to the wayside, Mobile is now as
important - if not more important - than the desktops
indeed, mobile operating systems and tablet screens
are now all part of the mix. making the current field of
web design and development - as well as the future - an incredibly exciting place to
be. And. of course. Web Designer will be there to guide newcomers, enthusiasts and
the experienced alike along the way. Here's to the next 200 issues!

header

Find news and feature items at@www.webdesignermag.co.uk

Battle of the browsers

Back in 2008. in Europe it was a straight fight between Internet Explorer and Firefox. IE
was still top dog with Firefox the hot. up-and-coming contender. Opera and Safari were
on an even keel.

Chrome was just
a baby and
SeaMonkey
(nemennber that?)
was making up
the numbers.

How times
changes

Source:

g 55 lsteounijer.com

The rise of the website

There are over half a billion registered
names for websites, so potentially over
half a billion websites. However, not
every name is active. Active sites make
up typ leally 25 or so per cent of tih e
registered total. December 2011 saw
555 million websites, but only around
170 million were active, for example.
Source: v\ ww.pingdor n.ccr n

SSSmMlta

234million;

IS7 million

Dec 2008 Dec 2009 Dec 2010 Dec 2011

]I _ 1 _I

Dotcom still number one

There are nearly 100 million com
domain names registered in the world
- a rise of almost 20 million in just three
years. Its hard to believe that so many
exist, but it does explain why it s so
hard to get one!

Source: wwwamdomjram

S5£mLULaj*

81.8 rallticKTj^ *-*■'"’**

Dec 2008 Dec 2009 Dec 2010 Dec 2011

I_I_I_I

COMMENT

Russell Barnes

Editor

< yl I made the decision to work In computing and
technology from a relatively young age, while the
Internet was in its infancy. My thinking was simple - our

will the career opportunities. It's proved to be the only
sensible decision I’ve ever made. The industry as a whole is

young, dynamic and bursting with creative vision and in no

other area Is this more true than In Web design. What the

next 200 issues holds in terms of new web technologies is

anyone's guess, but that's what brought me here in @@

the first place -1 can’t wait to find out.

COMMENT

Steven Jenkins

Features Editor

£ £ 2 00 Issues Is an impr essive feat, and while I haven't
worked on every issue. Fm proud to sav I have been
associated with the magazine for nearly half of them.
Imagine Publishing bought the rights to the Web Designer
brand in 2005, and the mag has gone from strength to
strength. Looking back it's staggering how far the web and

web design have come in those few years. Flicking through a

copy of 116 brings a wry smile Lo my face: Lhe technologies
have advanced beyond recog n ition, and design in general is
far more sophisticated. It does make me wonder where we
willbe in another five or ten years: HTML6, CSS7,
Dreamweaver 25. Firefox 1QQ? Whatever happens. I @@
am really looking for ward to the future.

|j|n| Web Designer posed the question: What year did you build your first website and does it still exist?'
Here's a few of the replies from our dedicated band of followers...

@duskwebdesign
@WebDesignerMag 1998 , and no it

@changinghorizon
@WebDesignerMag Can't

@create_oblivion

@WebDesignerMag 2001, my first

doesn’t. Was for a blind users org 1

remember the year, but were

portfolio site built with nested tables

built for my final-year uni project.

still proud of this one:

and a hideous Flash splash page!

They've disbanded so site long gone

http://woo de nf r u its. co m

Thankfully it no longer exists

©seanlangweb

@WebDesignerMag First website

@WeAreWebDesign
@WebDesignerMag 2007

@FotoLuna

@WebDesignerMag My first

that went online was 2007 and sadly

and, painfully, yes ; it looks

website 1993. Doesn't exist any

it doesn't still exist because my

embarrassingly awful

more - don’t even have it backed

hosting went down i

now though!

up unfortunately

header

| raws Discussing the hottest topics in the web design world

Stay at home designers

Is it time to make the switch to remote and home working? The facts show that
businesses and individuals could both reap the rewards on offer

D esign, by its very nature, is a
profession that is typically
performed In front of a screen
with the designer sat at a desk. This
scenario is the norm for agencies and
offices across the globe.

The same scenario is one that can be
applied to homes around the world. It is
almost inevitable that most designers will
have a very similar setup at home. An
internet connection is almost guaranteed, a
copy of the latest CS suite (or preferred
tools) and a comfy chai r wi II all make the
grade. With all the necessary assets in place
the next question is. 'why don't more of us
work from home?' Is it the iack of intelligent
company? The isolation of a home office?

Or is it that we simply cannot be trusted? On
a more positive note. travel times will be
immediately negated, overheads could be
reduced, and more flexibility introduced to
working practices,

Remote or home working is hot a new
scenario, but one that is gaining more
ground as technology bridges the gap
between the office and home. The recently
departed Olympics were a great example of
the practice in action.

The government advised London-based
businesses to consider flexible working, it
seems that their words were heeded. with
around a third of businesses encouraging
flexible working during the supposed
Greatest Show on Earth™.

Cloud computing is one technology that
helps bridge the gap between home and
office. Andrew Gilbert. MD of cloud solution
specialists Node4 said, '"Cloud computing
removes the need for executives to
physically travel to their offices to meet with
each other face-to-face, thus offering a
perfect solution to businesses to ensure
smooth operations.'

This is just one face of home working, it
also has a host of other benefits, as Gary
David Smith of Prism Total IT Solutions
pointed out, 'Home working is more
productive, greener and can save
companies money.'

For those who don't believe that workers
will be as productive, the figures say

otherwise. British Telecom - one of the
pioneers of home working in Britain - has
15.000 home workers among its 92,000
staff. They report that they have found
home workers 20 per cent more productive
than office based staff, less likely to take
days off due to illness, and save the
company about £6.000 each every year in
business expenses.

Taking a slight sidestep, a report from
online employment specialists Elance
reveals record-breaking growth in online
work, with earnings and job opportunities
far outpacing the traditional employment
economy. It seems there are plenty of
pluses for working at home and online, so
why Isnt it happening on a big scale?

Great digital mags

Visit greatdiRitalmafi s.com to get Web Designer on
your favourite digital platform

Web Designer, the premier magazine for aspiring online creatives has teamed up with
Zinio, the leading digital publisher, to offer more options for getting your favourite
magazine delivered in the formats you want to read.

Imagine Publishing's new partnership with Zinio
means that Web Designer is now available for PC,

Mac. iPad. iPhone Android. Blackberry and Web OS.

This means that wherever you are, you can get the
latest cutting-edge practical projects, features,
interviews and inspirational design showcases at
your fingertips.

Zinio provides the apps (db-zmioicomfepps/
indexjsp) reeded to get the best on-screen reading
experience, while Web Designer provides the
unmissable content

20 0

less. »

Who delivers the fastest
CDN for jQuery?

Choosing the right content delivery network can
ensure best performance

A report from Pingdorn Cbit .lv/NLFhfE3 has revealed that the most commonly used, and
free, hosts of jQuery - Google. Microsoft, and Media Temple - have proved reliable, but
with inconsistent performance.

To evaluate the networks, Pingdorn performed tests from multiple locations across
Europe and North America, once per minute, around the dock, over 30 days. The
results found that all three offered excellent availability, but that wasn't the case for
performance. For sites that don't use HTTPS or secure servers, Media Temple was by far
the fastest. Google came a close second in Europe but lagged behind in North America.
For HTTPS sites Google was the fastest in Europe, with Google and Microsoft similar in
North America. Finally. Microsoft was
deemed the worst performer in
Europe, but on a par with Google in
North America overall.

ife jQuerv

* write leaf, do more.

Bite-sized coverage of the month’s trending topics

PhoneGap ssssT Mountain Lion

. r reaches
T versSon2

Smartphones users lack security G' ^ -

YouGov research. com miss c oed by sea. rily p mvicc C M

smaripnones

grabbing a smartphone rather than going to the
desktop when visiting the web. 78 per cent of
respondents choose the smartphone compared with ft

57 per cent who chose their desktop. More * Client-side stack to change theface of

wonyingly, only 19 per cent had protection installed M front-end development
on their phones.

W3C announces
four new editors to
replace Ian Hickson

Yeoman iPad mini

• Will we really beableto get our mitts on a mini
iPad in September?

Mountain Lion
for Windows

Not exactly, but software developer
PARAGON Software Group has
released NTFS for Mac OS X 1C 1 . This
is a standalone Mac OS X 10.3
-compatible application that allows
for dual-boot users to access
Windows partitions via an Apple
Mac. With the software installed
users will be able to create, delete or
modify files as desired.

header

WIN A 5TB LIVEDRIVE
ACCOUNT FOR A YEAR

YOU COULD WINONEOFIO
LIVEDRIVE PRO SUITE ACCOUNTS
WORTH £150 EACH!

L ivedrive helps creatives
around the world back
up their most precious
files in confidence. Giving
artists peace of mind with an
incredible offering that protects
files, the Livedrive Pro Suite account
enables users to sync files between
computers, access them anywhere
through the cloud, while sharing
content with colleagues and clients
if needed. And all of this can be
done without inducing any technical
headaches: simply back up files to
the doud and restore them at any
time with just a single click,

Whether you use a Mac or a PC, it
works just like any other drive; drag
and drop your files between your
favourite apps and let Livedrive sync
the files online between all of your
computers for you, What's more, it's
fast With industry-leading systems
and software. Livedrive is quick,
efficient and your upload/download
speeds are never limited - you won't
even know it's there! Visit www.

I ivedrive.com/forhome/DrQsu ite t o

find out more information.

For a chance to win one of ten
Pro Suite accounts, simply enter the
competition by 19 September 2012

WHATKTHELIVEDRIVE PROSUITE?

• Pro Suite combines all Livedrive's features in one easy-to-use package

• It gives you unlimited backup for up to five computers

• A massive 5TB online syncing drive allows you to access files anywhere

• The package even enables you to share with those not using Livedrive

• FTP, SFTP and WebDAV access to Briefcase is available if needed

• Apps for iPhone and Android mean you can stream files to your mobile

• All data is stored securely in Livedrive's UK data centres

HOW TO ENTER:

For a chance to win one of ten Livedrive Pro Suite accounts worth
L1SO each answer the simple question below. Send your answer to
webdesigner@imagine-pubLi5hing.CQ.uk - subject 'Livedrive comp'

How much storage does Livedrive’s
Pro Suite account offer?

A: 100 megabytes B: 512 gigabytes C: 5 terabytes

TERMS & CONDITIONS Imagine Publishing and Its partners have the right to substitute the prize for a similar Item
of equal or higher value. Employees of Imagine Publishing. Livedrive, their relatives or any agents are not eligible to enter. The editor's
decision is final and no correspondence will be entered into. Prizes cannot be exchanged for cash. From time to time. Imagine Publishing
or its agents may send you related material or special offers If you do not wanL to receive this, please state so clearly in your competition
entry. All entrants agree to participate in any promotion related to this competition. The competition closes 19 September 2012.

Competition

&ni§(&ja

Hosted

technology,

minus the headaches

innW.TOMORRfflH MHlfUl®

Whether you’re starting from scratch or a tech wizard, unreliable technology,
limited product choice and a lack of support are all headaches you could do without.

Fasthosts has been delivering industry-leading technologies, for thousan ds
of customers just like you for over 13 years. With wholly-owned and managed
secure UK data centres, dedicated 24/7 support and a team of experts,

Fasthosts are always here, supporting you every step of the way.

For help and advice call us now on QBOQ 6520 444

Working with Fasthosts is smooth, from choosing a domain name
or hosting and managing your website the process is simple .

The support services are excellent and communication superb!
i highly recommend Fasthosts to my clients and connections.
Jules Thomas The Last Hurdle

www thpl^hnr/fS/r rn uk

Value for money 4 ,

\ v "x

You’re our priority

today, tomorrow and the future

WEB HOSTING ■ DOMAINS ■ EMAIL ■ DEDICATED SERVERS ■ VIRTUAL SERVERS ■ RESELLER HOSTING

fasthosts

Making business work better online

fasthosts.co.uk

or call 0800 6520 444

<h«aclei>

crowd source

Crowd

source

% to 6

Your emails, tweets, forum comments. The social network, but in print

This month we discuss Word Press security, the importance of web fonts, and how best to train as a designer or developer

subject Sticky disc

From Ken Toll

I've been reading the mag for about four or five years, and a
subscriber for about the past three. Over that time, while the
magazine has got even better, the mounting of the free disc has got
worse. I really hate to mutilate a magazine, just to get the disc!

With the earlier clear plastic sleeves, I could remove the disc, and
try and gently peel off the sleeve. The sleeve would be intact and
usually I had an even's chance of not damaging the mag - unless
they used a slightly different adhesive.

Now with the card sleeves, I can't even get the sleeve off
undamaged, let alone the Mag. Please can someone investigate the
disc mount - and come up with a viable solution, or give us a URL to
get the disc content from...

Web Designer likes to keep its readers happy so

your comment has been passed on to __

the relevant department. One
solution is to keep the disc in
the sleeve, simply take out
disc when first received,
copy the content to the
desktop and pop it back ,
in the sleeve. Then
when you want to use
any of the content, install
from the saved location.

subject Fonts and PHP,
do you agree?

From Rog^rio Marques

WebKit

Discover the kit
needed to help
create inspirational
and interactive web
pages

WordPress Backup
toDropbox

wpb2d.ccnn

v\V' Vl ’Ki>Phl£S

I realty liked your articles about
fonts and PHP in issue 198 but
somehow I felt compelled to write
to you about just t hat
The font revolution is maturing,
we all know that, but everyone
seems so excited about all this fuss
that they seem to forget about
print fonts (yeah I know that
display fonts can be printed. I'll get
there...) I believe it's time to start
writing more about fonts that are
used on paper, specifically those
that allow us to reduce our costs

Remember that saving a little
here and there multiplied by
several prints Is a lot, and In these
times of contention can be a very
good feature on any website that
needs print reports
In reading the article about PHP
tips, there's the mention that 'PHP
has Its problems, but then again,
so do all languages' - and white I
couldn't agree more, I just wanted
to give my point of view as a
computer programmer: it's not the
language that defines the good or
buggy program, its often the
coder. I’ve programmed with a lot
of languages (BASIC. Pascal. Turbo
C & C++ Clipper. COBOL Visual

oblivion and some are used
according to what’s fashionable...
But they all do have something
called best practices, and these
are Lo be used; these exist for a
reason and they too evolve, so we
coders need always be learning
and evolving.

Does anyone remember the
GOTO command? Anyone?

Let's start by saying we are very
happy that you like the
magazine. We have to say that
there are some great points
raised. What do Web Designer
readers think? Let us know if
you agree or disagree.

Face book for WordPress

deVel0Der5.racebQ0k.com/

wgrdprjss

Redesign the Web
bit.ly/qJSdvc

and be economic.

Although we have all these
portable devices connected, there
is stiB a need for printed reports,
invoices and so on. 5o what about
an article on those fonts that only
print on the border, not filling
inside (or similar) allowing Lo
preserve the ink and the printer (or
other similar techniques!

FoxPro, Visual Basic. VBScript
HTML, Java, JavaScript, ASR VBA,
VB.NET, Delphi, CSS, PHRand
each of them has their own pros
and cons, some are better suited
for Jobs than others and some are
all rounders, but they all evolve
through time. Some were
forgotten and might rise again
later, others seem to fall into

Using Accordion
for content

From Douglas Toavs

Do you know of any examples of
using the JQuery accordion
method to lay out extensive,
in-depth content? Eg the
equivalent of 13 pages of print

It’s not the language that defines the good or
huggy program, its often the coder tl

header

Join the conversation as it happens on Twitter 0 @WebDesignerMag
Comment on the news and opinion @ www.webdesjgnermag.co.uk
Email the editorial team at Q webdesigner@iniatdne-Dubllshlng.co.uk

content placed in die accordion method subject In search of a great

with ten subheads? Were considering this search function?

method of avoiding layers of con tent and l ? r om Cliff Barragry

would like to see it in use. ——-———---

The accordion method is an interesting
option for displaying a lot of content*
The BBC Sport site uses it to great
effect, espec ially inthes ideba r.
However, this doesn't display masses of
content. Take a look at this site - bit.ly/
QewSjd - for an i mag inati ve way to
display lots of content. Alternatively,
take a look at this clever use of the
accordion - biUv/fk3qzN.

subject Thanks for the
inspiration

From Earl Varotia

Hi I'm a big fan of your magazine and it
really Inspired me to be creative in
designing and developing for the web. So
thank you, and please keep inspiring us.
My portfolio site I just made, inspired by
you ww w.ea rlva rona.co m

lama huge fan of Web Designer. Great
tutorials, I am currently doing a project in
Word Press and I require a search form with
multiple options, like a filtered search. This
all seems very straightforward but I can't
for the life of me find a tutorial or a plug-in
that will do what I want. This is killing me as
I have a limited PHP knowledge. Have you
guys done a tutorial on this kind of thing?
Or could you point me in the right
direction? Any help you can give would be
much appreciated.

There are thousands of WordPress
pi ug ■ i ns ava i la ble on t he ma rket. but
finding the right one to fit your needs is
not always that easy. Unfortunately, we
do not have a tutorial to match your
request, though we will definitely keep it
in mind for a future issue, A plug-in worth
checking out is the Multiple Category
Selection Widget wordpress.org/
extend/plug in s/multi pie-category-

selection -widget. This allows for
multiple dropdown lists to narrow down
a search and make the terms more
specific. Alternatively, try this option at
matt hewaprice.co m/searc h- mu Itip le-

cuslomJlelds-i n- wordp ress. This allows
the user to add different keywords to
help filter a search,

i# There are
thousands of
WordPress plug¬
ins on the
market but
finding the right
is not always
that easy §•

Web Designer is here to inspire and help,
and we love the portfolio site.

Comments from
the Blog

• Web Designer is always
keen to hear from its
readers, followers and
visitors. Here we bring together
a specially selected collection
from the last month

©RMolletje

©WebDesignerMag fm a
loyal subscriber for over 3
years now and do not like
that <webkit> has been
flushed. Why? Furthermore:
great magi

©thejamiefraser
Who needs breakfast tv
when you have the latest
©WebOesigner Mag mag to
read! (Breakfast is cold now
though!)

©create oblivion
Unwinding after a hard
week of finishing off works
new website, time for some
tutorials courtesy of @
WebDesignerMag #199
which one first?

©DesineCornwall
Reclined on the sofa,
enjoying the latest issue of
©WebDesignerMag.
Perfect,

©deucecreative
For lunch today I II be
chomping through the
latest ©webdesignermag
- it's looking pretty tasty to

©Mullins Daniel
©WebDesignerMag still
awake, still trying <tutorials>;
thanks for t gr8 mag
Icoding #webdesign #html

header

emotional and immersive , . _ .<

experiences, For more BfilljElIIllJl J30] KQ

information, visit www.
bi^spaceshipcom

Are HTML shortcuts damaging to your creativity?

A s a child, calculator watches fascinated me. Third-grade
swag factor aside, I marvelled at the idea of fooling my
teachers into thinking 1 was a fashionable math ace.
They would never know of my devious plan to secretly let a machine
solve my exam questions, Unfortunately, I never had the money to
buy one and by the time I did,, we were allowed to use calculators
anyway In the end, not only did I have to learn to read time off that
analog watch I got for my birthday, but I also had to take the hard
route and learn how to add, subtract, multiply and divide.

I often imagine what could have been if I had used a calculator
from first grade. I would have blasted through exams as if they were
a silly chore. Ultimately, I would have been stuck with entering in
digits and generating abstract results in return. Would I have ever
grasped the potential of what I could actually do with analysis,
trigonometry and the like? I might never have realised that I can
solve anything from the navigation systems used In satellites
orbiting Earth to the (debatably equally significant) trajectories of
birds being catapulted at green pigs.

Fast forward from naive elementary-school self to naive present
self. Coming from a Flash and animation background, l was used to
a cotton-wool world, I would code something once and it would
magically run on oodles of browsers and devices. It was rewarding
and flexible with countless ways of solving the same problem.

However, a year ago I left this happy place and faced fresh
challenges. For me. the triumphant return of HTML and web
standards meant learning new technologies. I did so with my first
standards project for a beverage client, As an HTML-tenderfoot, I
had an advantage: I was completely oblivious to the boundaries and
limitations in this new world. Unsuspecting as l was, I pushed for
more and more elaborate designs and visuals with the desire to
create something that would capture the level of Immersion we
were all used to from Flash. In the end, we were able to create
something unique that bent the venerable norm of standards
websites at the time. We let our idea dictate the technology.

During my first excursion to standards-land. countless late nights
taught me valuable lessons. Creating expressive experiences came
at the high price of fragmentation. Suddenly, we had to account for
platforms, devices and browsers. Whereas creating a gratifying
visual effect in Flash was a matter of applying the right timing and
easing to an animation, with web standards it meant doing the same
thing for one platform and then altering it entirely tor others.

Luckily. Web Standards have an Incredibly talented, ever-growing
community ready to swoop in for the rescue. There is a startling
abundance of amazing frameworks, libraries, utilities, code-snippets,
gists, forks and services to solve this fragmentation with abstraction.
Above all, jQuery became the Swiss Army knife of my utility belt for
all things cross-browser abstraction. Suddenly, tasks I deemed as
tedious were done for me automatically behind the curtains. 5oon,
the ubiquitous Inclusion of |query.mln.|s was accompanied by an
ever-growing army of fellow community creations. Any complex
problem that needed solving? The Internet probably had a solution
ready for me. and the utility belt kept growing.

After a while I became suspicious: grid frameworks determined
our layouts, Typekit chose our fonts, and animations defaulted to
easeOutQuad. Building something new and unique had turned into
an orchestration of pre-existing pieces, All I had to do was lay out the
string and tie those pieces together.

That's when It struck me: this utility belt had become the calculator
watch. I didn't know or understand what was going on under the
hood anymore. I realised that I had started to delegate my curiosity
to the Swiss Army Knife. Technology was dictating my ideas.

Abstraction isn't inherently bad. Frameworks like Processing take
away all the unnecessary baggage of low level languages. JQuery
does the same deed for standards by Ironing out the scattered
browser landscape. However. In striving for Innovation, we can't
become complacent with the defaults we've grown accustomed to.
Every once in a while we must risk breaking things and tearing them
apart to push beyond what's Just good enough into what is great.

Any complex problem that needed solving? The Internet
probably had a solution ready for me

header

technology-

Working for
killer clients

comment

Devin Silberfein is the chief operating
officer at Flash tr allblazers 2 Advanced
Studios. Based in the California hills ,
he has over a decade of on-the -job
experience in interactive, web
and mobile de velopment
andanever-say-die
attitude to getting
things done.

Devin

Silberfein

If they don’t kill you, they will only make you stronger

T o recycle (and modify) an old saying: clients, you can t live
with them, and you can't live without them. That Is the nature
of our industry. We all have internal, back-burner projects Capps?)
that we'll eventually finish and launch to wild reviews. Well sell them and
retire young. Until then though, we spend most of our hours on client
work. After all, clients afford us the opportunity to create things for the
masses on a daily basis, while providing a level of variety that most of us
need, else we'd go crazy.

In our 13 years and over 1.000 projects, 2Advanced has had some
great clients and our fair share of challenging ones. In time, those
challenges make us stronger and more capable. My eleventh grade
English teacher wasn't a big fan of my work, but 1 probably learned more
from him challenging it than I did from any other teacher or professor.

Here are the dients who like Mr Pepe in high school have taught me
the most (albeit accidentally).

'Here's the thing, we need to launch in 30 days;

We've seen new and return dients come to us with that three-month
project and only a month to do iL It'd be suicide to take on their work, but
we've all done it - often because it really was a cool project and we
wanted to prove we could do it And that's exactly how this client has
made our team better. By sheer will the team pulls out a miracle and our
confidence as a group rises, Suddenly the three-month projects are
easy. If not boring. Additionally, when we put our process to a stress test
like this, we team what works and what doesn't
I have a background in design.'

Too many times I've had dients Idl me about their background in
design. I'm not sure if this is meant as a compassionate play ('see, I'm just
like you') or a challenge Cl know what I'm talking about so you'll have to
try harder to 'wow' me}, but either way I see it as a warning sign.
Regardless of the validity of their opinion, we end up defending our
designs, and in time well look at our work more critically to make sure It's
bulletproof. In doing so we find things to improve that we otherwise
wouldn't have even considered, that ultimately make for a belter product
and happier dient

Looks Fantastic! Just one more thing/

We recently wrapped up a design project which easily set the record
here at 2Advanced for 'one more thing emails. Every time we delivered
an updated comp our dient was ecstatic - loved it and graciously

thanked us - but they Just had one little change. Scope and budget
Issues aside, this was especially challenging as we teetered at the edge of
completion almost indefinitely only to get sucked back in for one more
round' of revisions. Adding to the frustration, we knew that each revision
weakened the design incrementally. In the end though, this was a lesson
in detachment and patience. We fight to do great work, but it's our client's
name on the line and they know their needs and customers better than
■we do. Just remember to breathe.: Itll be okay.

Our office Is still using IE3, so we need to target that.'

When I look at penetration rates for different browsers, I always
wonder how many of those IE users are the dients of the world, under
corporate lockdown. Without turning this into a browser debate, it stll
warrants some consideration when clients are myopically focused on
what it looks like within their walls and not on their customers' screens. A
dient on IE8 means nothing if the target audience mostly uses Chrome.
If we must deal with older browser versions, we approach things from a
standpoint of progressive enhancement' (a more glass-half-full version
of 'graceful degradation'). We will design for ideal situations and also
create a mock-up showing how older versions will perform. Once we
have buy-off on that, we have a lot of room to optimise for each browser
In the end, we’re on top of browser compatibility issues and we sleep well
knowing that we provided the best possible experience for all users,

We can t decide, so let's combine elements of both designs/

Its been statistically proven that if you produce two unique comps for
a dient 78 per cent of the time, they'll come back with an answer like this
I like to think of this as a good thing because it means two designers both
hit the mark, It's a more complicated situation in practice, though there is
an upside to this, Much like the dient above who challenges everything
you put together, we end up looking at our work under a microscope;
and It's stronger In the long run because of it With two designs each
partially hitting the nail on the head, the new task is taking what's right
from each without creating franken-oomp. This is a challenge for sure,
but any lime we can rise above a challenge, we know we're making
ourselves better.

All ot these lessons were learned with the gift of hindsight At the time,
expletives were muttered, drinks were had and computer mice were
thrown, al to handle the frustrations. Remind me of that next time my
mouse makes It to the other side of the room.

header

comment

technology-

Life after
Flash

Patrick is responsible lor driving and
shaping R/GA's technological vision,
while also working closely with
clients to help develop their
strategic tec hrucal requirements.
Prior to this, Patrick was
director of engineer! ng at
the Walt Disney
Company.

Patrick Van Kami

Flash is dead, so let’s build a better Internet - with responsible JavaScript

M ost developers celebrate the rise of HTML5 and JavaScript
as the dominant rich Internet application technology hut
few could have dared hope that Flash would disappear so

quickly Incur enthusiasm to build a new Internet on open standards, we
must be careful not to make the same mistakes with HTML5.

Flash was the standard for rich content on the Internet, mainly
because there was no other option. Browsers did not support animations
or web video natively, forcing developers to use plug-ins. Flash defeated
competing plug-ins like Real Player and Microsoft SltverllghL According
to Adobe, it's available on 98 per cent of desktop browsers.

The only non-plug-in option for rich content JavaScript suffered from
the inconsistent way that it was implemented in different browsers,
making cross-platform code difficult - but worse, many web developers
(myself Inducted) considered it a toy language in comparison with Java.
JavaScript was confined to basic tasks such as form validation, dynamic
navigations and bask: content manipulation.

Although Flash achieved dominance few regarded it as a good
technology. Flash content was rich, but it was hidden from search
engines, slow to download and confusing to users who tried to use
browser controls like the back button, There just had to be a better way.

Even bdore Apples refusal to include a Flash player in iOS, there was
a growing realization that JavaScript and HTML were undergoing a
renaissance making it a viable alternative to Flash for RIA development
- even without the new mecte features offered by HTML5 and CSS3.

How did this mirade transformation occur? First JavaScript’s critics
had underestimated its capabilities for functional programming, which
gives it flexibility, elegance and power. jQuery and other libraries showed
JavaScript could be used for serious engineering- even high-concurrency
server-side platforms can be made through Node.is.

(Query also made cross-browser JavaScript applications possible by
providing universal abstractions over different browsers. And on top of
JQuery cpenrsource developers built an array of new libraries around
QtHub, including code analysis tools, test-driven development tools, and
optimising frameworks-to modem application stacks in pure JavaScript.

(Query's fluent API and ability to mitigate browser fragmentation
made JavaScript's popularity hugely possible, but it is not the only
alternative. Frameworks like MooTods or Prototype have their adherents
- although no other library has been as widely adopted as (Query.

The success of other non-corn pi led languages like Ruby and Python
has shown that a compiler Is not essential for building large-scale
applications ■ unit tests and code analysis can replace or even extend
the protection they offer.

Test frameworks Ike JsTestDriver and Phantom JS enable browsertess
testing from command lime or build script For actually writing unit tests,
Jasmine and QUnit are leading the pack. For those ready to take testing
to the next level. Simon provides mocks, spies and matchers that enable
you to write fine-grained tests where collaborating components are
faked to Isolate individual code units for testing.

JSLint is a widely used code analysis tool, which promises to hurt your
feelings and make you a better programmer. And for those 'who find
JSLint's flinty critiques loo harsh there is the gentler JSHinl tool.

To reduce the browser footprint of your JavaScript - both in terms of
HTTP requests and in download size - there are numerous options for
minifying or uglifying multiple script flies Into a single download. The YUI
Compressor is most well known but also check out Google's Closure
compiler and UglifyJS.

There are new many full application stacks, including model-view-
controller platforms like Backbone, Spine and AngularJS A completely
browser-based JavaScript application can be built without the need for
server-side scripting (other than a REST API to handle data requests).

All of this has created new possibilities for JavaScript engineers - but
also new risks. As the capabilities of modern browsers enable more
sophisticated and exciting interactions, many of us fall in to toe trap of
exploiting these opportunities without casting an eye back to our recent
experience with Flash. The temptation to add imaginative interactions in
the frontend is leading to practices that give poor browser performance,
and cope poorly with the increasing number of mobile devices used to
view our sites. Careful technical design (s as critical as ever

A colleague of mine at R/GA London often uses a quote in a talk on
this very subject where he references Jeff Goldblum's character in
Jurassic Park, saying ",.your scientists where so preoccupied with
whether they could, they didn't stop to think if they should’

5g nexttimeyou are building a totesamazeballs' parallax extravaganza
in HTML5 and JavaScript, take a step back. Try to think about how it wil
work on a mobile device on 3G. Users won't congratulate you for using
web standards if they have to wait three minutes for the page to load.

header

Pay As You Go
Advertising

Advertise on Google.

Pay only when people click on your ad.

For most types of advertising, you pay for people to see your ad. With Google AdWords advertising you
only pay when they click to visit your website. So you get exactly what you pay for - more customers.
And because this is pay-as-you-go advertising, you have complete control.

Control how much you spend

You can seta daily spending limit and an amount you're happy to pay for people to dick
on your ad. The price is chosen by you, not us, so you never have to worry about going
over your budget.

Control who sees your ad

Your ad will only appear when potential customers are searching online for relevant
terms you've chosen to describe your business.

Control where and when they see it

You can choose to target your audience by location and time: attract local customers
during your opening hours or, lfyou J d rather, promote yourself to a global audience
round the dock.

Voucher missing?

Don't worry, someone in your company may
have beaten you to it. Track them down and
make sure they're claiming

£50.00* free advertising credit

with Google AdWords for your business.

No minimum term or commitment

Offer only available to businesses in the UK.

Don't miss out - try it today

We're offering£50.00* free Google AdWords
advertising credit for business users**. There's
no obligation to continue - you're in control.

To start attracting new customers today:

Visit fioog lexo. u k/ads/start

Or call 0800 169 0478*

***Calls to 0300 numbers are free from BT land lines but charges may apply ffyou use another phone company, call from your mobile phone
or call from abroad.

^Ternns and conditions apply. Promotional credit can only be used Tor .AdWords accounts that are less than 14 days old by advertisers with
a billing address in the UK. Advertisers will be charged Tor advertising that exceeds the promotional credit. Advertisers will need to suspend
their ads if they do not wish to receive additional charges beyond the free credit amount Offer subject to ad approval, valid registration and
acceptance of the Google AdWords Programme standard terms and conditions, The promotional credit is norrtransferable and may not be
sold or bartered. In some cases, advertisers who choose prepay billing may be subject to a £10 minimum prepayment before their account is
activated. Any such prepay amount will be credited to Advertiser's account once account is activated. One promotional credit per customer.
For full terms and conditions please visil hrln^/wv/iw.gnagle.cn.ukj'ariword wnucherlerms, Google Ireland Limited, a company incorporated
under the laws of Ireland, with company registration number 36RD47 and registered office address at Gordon House, Barrow street, Dublin 4.
Ireland, Copyright 5012, Google and Gnngle AdWords are trademarks ofGnagle Inc, and are registered in the US and other countries,

Google

feature

SijTwraS

MATT MULLEWWEG J

u For new developers, WordPress
can be like a gateway drug ”

WordPress is synonymous with the web, it
revolutionised the site- bull ding process and now
accounts for around 16 per cent of sites on the
Internet. The name and face behind the publishing
platform is none other than Matt Mullenweg. In 2005
he founded Automatic, which grew into the now
impossible to ignore WordPress.

With WordPress approaching its tenth birthday, Web
Designer got to speak to Matt on the past, present, and
tutu re of the platform. He reveals how WordPress is a
gateway to web design, the focus on improvements
over the next 12 months, and the challenge of shifting
to the mobile arena.

WordPress is fast approaching its tenth birthday, How
has the platform changed and why do you think it
has been so successful?

Where to start! When Mike Little and I were throwing
ideas back and forth about the first release of
WordPress I don't think either of us would have
imagined where it has ended up today

In the beginning we were totally focused on
blogging, mostly for our own use. and in those
formative years the community laid down the
foundation for much of what were known for today
including the ease of set up, customisation, and a
fanatical focus on authors. We really wanted to build a
great environment for authors to create in. That's why
even today consultants choose WordPress because
they can train clients in a fraction of the time it would
take with other systems; it was that initial focus on
regular end-users.

The second mam phase was WordPress becoming a
CMS. I saw a pretty clear need in our community from
folks who wanted more than just a blog, they wanted
the WordPress ease of use for the«r entire site. We
started to think about what it would look like from an
architecture point of view to manage content outside of

a normal blog chronology, figured out a pretty elegant
way to do it. added the page and theme frameworks
we still use today, and finally introduced WYSIWYG
shortly thereafter. Those seeds kept growing and finally
matured in our 3.0 release when we made it easier for
developers to use Custom Post Types to manage hot
just posts and pages, but really any type of content you
can imagine inside of WordPress, whether it's albums,
real estate listings, events, or really anything.

The phase we're in now is WordPress as an
application platform. As our developer community has
grown up, and experienced the flexibility of Custom
Fields, Post Types, and formats, they're starting to build
applications on top of the WordPress framework, or as
plug-ins, that don't look like WordPress at all.
BuddyPress, bbPress.and the commerce plug-ins like
WP e-Commerce and WooCommerce are good
examples of this, tx.it I think there's way more coming
down the road in places you'd never expect, like Spotify,
which uses WordPress for its website. There's probably
someone reading this very magazine who's going to
build the next big thing or service using WordPress
behind-the-scenes, beyond what I can even imagine
nght now.

The WordPress platform has been adopted by
millions of designers and developers. Do you think
that WordPress is removing the technical element of
the design process, or encouraging a new generation
of designers and developers?

1 think for new developers. WordPress can be like a
gateway drug. You can create great-looking sites
without writing a line of code, but if you're serious about
your craft soon you'll want to colour a bit outside the
lines. You'll start to pick up a bit of CSS to customise
things, or a little jQuery to do an effect a client is asking
for. and next thing you know you’re knee-deep in PHIP I
love that!

It's a lot hew my own story was - I didn't learn a
single line of HTML. CSS. or PHP in school, it was
something i picked up along the way as I wanted to do
more and more with the sites I was building. I read
blogs I ke zeldman.com and meverweb.com, books,
and tutonais all over the web.

That's not just the future generation of web
developers, it's the future of learning in general. There is
more information put online every day than any of us
could consume in our lifetimes, the only limits to what
you learn are an internet connection and your curiosity.

WordPress is a champion of open source and open
standards. The community is constantly pushing the
platform forward. How big Is the community, what Is
its purpose and how can people get involved?

The community has really surprised me in its growth:
there are about a dozen core developers, 150 core
cont-ibutors. about 300 active community volunteers
on ' WordPress org 20,000+ plug-in and theme
developers, and I est mate over 100.000 people
making their living from WordPress as consultants,
designers, developers, and writers.

The development side is pretty amazing to be a part
of - you can't walk up to Google and ask to write code
with their best engineers, but you can post a patch on
the WordPress bug tracker and have a conversation
with some of the best PHP developers in the world just
a few minutes later. As the community has grown it can
be intimidating to get involved, so we published a Core
Contributor Handbook, like an open source field guide
to getting involved with development ■ make,
wordoress-Q rq /c ore/han d boo k. And even if you can't
write a line of code, there are a lot of ways to get
involved with the forums, documentation, design, and
more. It's a very open and welcoming community.

As WordPress has grown, so has the market
surrounding the platform. Themes and plug-ins are
key components. Is this something you like to
promote and encourage, while also keeping an eye
on quality and credibility?

Plug-in quality and security has been a huge focus for
us this year. For security we've started proactively
scanning and flagging all of the 20,000+ hosted
plug-ins. We've fixed hundreds and hundreds of
problems and pushed the updates out to all WordPress
users, as well as helped educate plug-in authors on how
to code In a more secure fashion.

Second, we've had some pretty effective redesigns in
the piug-in directory to give people more indications of
quality. For example, instead of just showing the star
rating, we now show how many support threads that
plug-in has and how many of them are resolved. That's
more than a rating that will tell you how active the
plug-in authors are in supporting their work, which is an
excellent sign of quality,

What is the focus for updates/!improvements to
WordPress over the next 12 months?

I'm focused on three main things:

L The core development team looking at making the
media experience better, especially around how you
upload and interact with photos, galleries, and featured
images, I think users will appreciate this a lot,

2, Through the Jetpack plug-in Automattic is helping
make WordPress more social, to make it easy for your
visitors to share and comment using their Twitter and
Facebook accounts, for people to subscribe via email,
and in general to leverage the cloud services of

feature

u I saw a pretty
clear need in oil -
community fromi
folks who wanted*
more than a blog *

MATT MULLEWWEG J

WonJPmss-g^to make WordPress more capable.

3. At the heart of Word Press is customisation, and we
want to make it more accessible for users to customise
their sites without having to dive into theme code.
Developers will be able to leverage these APIs to give
their clients more ability to update their site and be
independent, which is also exciting.

Beyond the short-term future of Word Press, what
challenges lie ahead for the platform over the next
ten years?

Our biggest challenge is the shift to mobile phones and
tablets. WordPress was born, and grew up. in a desktop
world, However every year we've increased our
investment in our mobile apps and it's paid off with
more than 4 million users already. We need to bring
everything people love about WordPress in the browser
- the flexibility, customisability, and usability - to native
clients. Ten years from now there will be a dominant
CMS on the tablet side of things, and whether it's us or
not depends on how well we make this transition,

As a man with his finger on the pulse of web
publishing, what do you expect, or hope to be the
next big thing?

I’m really excited about responsive design, as much for
its elegance as the fact that people are really thinking
about their site as something that's experienced on
different screens and in different contexts. The best
thing about people giving more thought to mobile, or
even thinking mobile-first, is that they're reconsidenng
what the most crucial aspects of their web presence is

and paring things down to the bare essentials. That
simplification is extraordinarily hard for organisations to
do, but they're forced to by the constraints of the
mobile platform; and when they seethe sky didn’t fall
down that reduction can make its way back upstream
to the desktop experience.

WeVe been having the same experience In
WordPress. The mobile apps have been inspiring me on
how we can pare down our dashboard and make a
radically simpler WordPress.

Beyond WordPress. you have been involved in a host
of different startups such as Akismet and Polldaddy.
As a veteran when it comes to putting startups Into
practice, what advice would you give to anyone
looking to start their own online enterprise?

Thing single most important thing is the people you
work with. Find people who are as passionate as you.
share the same values, and who you want to stick with
in good times and In bad.

You have been touted as one of The Top 10 Most
Influential People Online‘ by a number of
publications, only superseded by such notable web
luminaries as Mark Zuckerberg, Larry Page and Steve
Jobs. That's good company, but how do you view
your achievements to date?
it's very humbling, and above anything its a testament
to the people I've had the good fortune of working with.
I don't think we're done yet. there is so much work left
to do still. I wake up every morning excited about the
challenges ahead.

Finally, in keeping with our two-hundredth issue,
what tools and themes would you recommend?

How that wete responsible for over 16 per cent of
websites. I think these are essential additions
For WordPress the following tools and themes;

1. Jetpack - includes stats, contact forms, sharing
buttons, email subscriptions, and more, ( ietpack.me)

2, VaultPress - bulletproof backup and security for
business WordPress blogs, ( vaultpressxom l

3, Akismet the best anti -spam around. fakismet.com)

4. P2 Theme - an internal Yammer or Socialcast that
you can run anyplace you can run WordPress.

( p2theme com}

5. j theme - it's a terrible name, but check it out here.

bit.lv/w4csYF

6, Theme Check - make sure your WP theme is up to
snuff, code-wise, f wordoress. am /exten d/p I uq- in sf
theme-check )

For third-party tools these are an ideal choice:

1. Facebook for WordPress - an official plug-in from FB
to connect your biog to the biggest social network in
the world.

2. WP-Super Cache - caches and speeds up your
WordPress, so it can run as fast as possible.

3. Email Post Changes - emails you a diff any time a
WordPress page or post is changed, Great tor keeping^
up with changes on multi-author sites,

4. AH in one SE0 - has a tonne of settings for SEG-
optimising your site.

5. bbPress - Now bbPress is a plug-in so you can
drop-»n forums to your WP-powered site with Just a few
clicks, no need to try and integrate templates.

# heart internet

UK’s MOST ADVANCED
RESELLER HOSTING

Sign up to our award winning Reseller Hosting and sell unlimited websites with unlimited
web space, bandwidth, databases, email and more, all at no extra cost.

The complete Reseller Hosting solution

Sell unlimited websites and domain names, as well as our wide range of additional products to
fit your customer's needs, Use our hosting billing & CRM solution 'HostPay' to sell in real time.

100% YOUR brand

Every aspect of your hosting is while label and can be branded as your own, including your
customer's control panel, web mail, welcome emails and anything else you can think of!

Create your own packages

Customise each account to any level you like. From how much web space and bandwidth
your customers get, to selecting what web apps they can install from their control panel.

24/7 UK support

We don’t employ any contractors, temps or external support services; all our support
team are 100% based in our UK offices and full time members of staff.

No hidden fees

Increase your proms with
exclusive reseller discounts

G Dedicated Servers
C Virtual Servers
C goMobi
G SSL Certificates

G Hosted Exchange
G Premium Email

£ Bulk Domain Names

66 Heart Internet support their

customers with market4emJlng
hosting technology si
greet prices

All the features you need to attract and manage customers are included as standard. Unlike Suzi Perry
our competitors we don't charge you for basic functionality, such as your customers getting a J ' Jq f
brandable web hosting control panel or additional MySQL databases.

As well as selling unlimited websites, pick and choose from a wide range of additional products. Including

Sell Virtual Servers

Only £8.99 per month

Sell Hosted Exchange

Only £4.99 per mailbox

/ Create your own VPS packages

/ Rill API Integration /

/ Linux & Windows 1

V Dell A Intel hardware

/ Full white label control panel for
* your customers

/ Sell VPS In reel time

/ MS Exchange 2010 as standard

j Free OuBook 2010 for you 4 i
your customers

10GB storage *

/ Transfer in Exchange 2003 4
2007 easily

y/ Sail Exchange in real time

Unux 4 Windows

Find out more: www.heartinternet.co.uk
Call us: 0845 644 7750

Normtt Price from only E29.9S ptr month

# heart internet

www.heartinternet.co.uk

Web hosting I Reseller hosting I VPS I Servers

Nespresso Naora

www.nespresso.com/naora

Development technologic* HTMLS.JQuery

Designer Hello Monday

www.hellomondav.com

Fluid video and layered graphics give this limited
edition site a sense of emersion in the story it is telling

£"£££££! asked with

i********

• ••••*#•£ communicating a

** *****

It ::::: complex marketing

message involving how
late harvesting is used
within the coffee

Industry. Hello Monday
created an emotive site
that is a masterclass in
the use of online video.
After loading, the viewer
is drawn into the site with easy access
to the Nespresso Naora story.

Hello Monday explains its approach:
"We identified the main task of the site
as being a playful and immersive
presentation of the videos that carry
the experience. We felt the need to add
specific interactive features, eg a
‘ripeness slider' that allowed the user to

get a perspective of the issues of timing
involved in the coffee making process."

The site is also built to allow access
on a number of platforms. The desktop
version uses Flash, with the version
aimed at mobile users optimised with
HTML. This may break with trend for
responsive design, but Hello Monday
felt that this was the best way to present
the site to as many potential viewers as
possible, and keep the user experience
intactacrossall platforms.

Striking in its use of 3D and video,
this site shows the technical prowess
that Hello Monday posses. The site is
massively optimised to ensure a
smooth viewing experience. Graphics,
video and user interaction come
together on a site that is at the cutting
edge of interactive design.

§ I We identified the main task of the site as
being a playful and immersive presentation
of - and navigation between - the videos
that carry the experience IP !

c Above*

* The photorealistic graphics combine with
smooth scrolling to offer a "window’ into the site

SF3D3HE

AAC73E7 *766.033

A321932 *A85752 ft9!543C

abcABC 1234567890

* Fmligerwas developed in 1&68 by the legendary
type designer Adrian Frutiger, The typeface is
available from Linotype

lightbox

Got it? Flaunt it! Tell us about your site ^ webdesigner@imagine-publishin

L1GHT$

(Below*

- The layered graphics and interactive
■coimpo nents offer a depth to the sorolll ng
homepage that instantly engages with the visitor

* Full-matlan video is augmented
with interactive graphics, which
allows tiie viewer to access more
detailed information
*The graphic panels overlay
beautifully when the video is paused.
The site is an exem pla r y model or
responsive des ign I n every way
•The ripeness slider gives the viewer
an insight into how the late harvest
influences the taste of the coffee
- Branding and the commercial
aspects or the site are nut forgotten,
ottering visitors full a fully functioning
eGommerce capability

lighlbox

Know a site that deserves to grace these pages? Tweet us now Q@webdesignermag

BokicaBo

www.bokicabo.com/en

Itavulopittant technologies MTML5, jQoery. CSS3, Vlmeo Froogaloop API

Designer Nikola Arezina

www.berqb.com

The creative use of video is at the heart of
this site that showcases the handmade
clothes of this Serbian designer

ZZZl mall sinesses can now

lllltlltl compete with even large

***** fashion labels using sites

like this. Nikola Are2ina
t dearly understands the

***“::*** power that video now

•ZZiSII has within the

"*!”**** eCom merce space.

Using a combination of
technologies.. the
innocuous looking
homepage of this site is a gateway to
creative video footage of the designer's
handmade clothing range
Areiina explains the thinking behind
the site's design: "The main idea was to
draw attention to fashion by using the
web as a medium of promotion rather
than retying on conventional and
expensive ways of advertisement. I
think that this version of the site Is our

best yet and illustrates the positive
energy we have towards the project."

The use of video across the site
allowed Nikola to showcase the fashion
designs of BokicaBo with Innovative
video using the Vlmeo API. With a
limited budget it illustrates that with a
little creativity and an understanding of
what the brand offers, engaging video*
based content can be created.

This small and exclusive brand uses
traditional photo shoots, well-chosen
typography and fun video footage to
create a site that engages with the
visitor, offering easily accessible
information wrapped in a piece of
seamless design. Nikola clearly
understands how to present this brand
and brings his design skills to the fore
with each page element expertly
delivered to the viewer.

I ll I think that this version of the site is our
best yet and illustrates the positive energy
we have towards the project III 1

<Ab»Vu>

* The new site for BokicaBo showcases the new
fashion range via engaging video footage

-The expert use of full HD-<quallty video footage
shows off the exc luslve handmade collection of
the designer

lightbox

UGHT$

<Top left, CKithWlHO

* The video can be paused and
the clothing on show looked at
in high ■ resol ution deta il

* The previous collections or the
designer can also be accessed
via a well-developed vertical
scroll micioslte

* As eac h p lece of clothlng Is
handmade, simple access to the
buyl ng option s Is always j ust a
dick away

* The older pieces In the
BoklcaBo col lection use
traditional static imagery that is
professionally presented

#a?AJB1 flDF0450 JTFBCD47

flCACBCS flE0235O AS301D0

abcABC

1234567890

abcABC

1234567890

■ Rooney from Jan Fromm Is an original font from
the designer who has been working sine 2003,
and is available rrom Type* kit

<Above>

■ Ron n ia was desi gned by Veronl ka Bu ria n and
JoseScagllone who are better known as
TypeTogefher, The font is available from Typekit

lightbox

Know a site that deserves to grace these pages? Tweet us now Q@webdesignermag

* Tlie one-page verb ca I scrol ll ng site
packs, in the content to showcase
the studio's many talents

^Afaiwes* sflbPVu*

* The short vertical sera II of the site is a great deslgn feature The visitor is invited ta open ad ditlonal w inflows to view - The Hexagon Factor y's design places the people bemnd Place

that the developers execute With ease detailed I nformation about the studio's ser vices Cliche front: and centre

lightbox

L1GH1$

<Delow^

* Bebas Neue I s anIm proved version or the earlier
font Bebas created ip 2005 bv Dfiarma Type,
whsra me font I? a free download

ABCflBC

1234567890

<J\1MpVu>

* The header on the site Is a typlea I exa m pie of
how the designers have used bald images as a key
design statement

Place Cliche

www.placecliche.com

Development t('4:tiiiQ]oyii'!i CSS3. jQuery

Designer Benjamin Cochois

www.hexaqonfactory.com

A superbly realised site that showcases the wide
range of services on offer from the Place Cliche
studio is a feast for the eye

he brief for the Hexagon Factory
was to showcase the services
l !mm available from Place Cl i th£. As the
studio prides itself on high-quality
imagery, this site is dominated by
pin-sharp images that give each
page a high quality presence.

Says developer Benjamin
Cochois: Tlace Cliche Is a
professional photo arid video
studio, so we decided LhaL the
design should be based on hi-res pictures. The
main content is hidden by default, and users
need to click on sections titles in order to
make it appear, so they can enjoy huge high-
quality background Images first then learn
more about the studio only if they want to"

Using the now familiar vertical scroll
technique, the Hexagon Factory didn't want
the site to be a passive experience. The hidden
content slides into view with a simple click on
each window, that themselves horizontally
scroll - this works as a great counterpoint to
the vertical scroll Static images mix with video
and text to deliver a site that speaks volumes
about Cochois' understanding of his client.

Stylistic in its approach, this site is also
eminently functional as well. Prospective
clients of Place Cliche will be in no doubt about
the studio's competence, and with the
Hexagon Factory's design perfectly
complementing the studio's brand values, this
site is a great example of how a business' web
presence doesn't have to be conservative.

i § Static images mix with video and text to
deliver a site that speaks volumes about
Cochois’ understanding of his client 9P

lighLbox

| experience SON Y

Design diary

Ride the development cycle

Ni kki DeFco,. creative
' copy director^

^[Kristin Keefe,M
exe eutive prod u cer

Project experience SONY

Web I expofteoce-soMfy-oon 1
Company I Firstborn

Web l www.fivstboni.corw

New York strategists, designers,
and technologists took up the
challenge to make users believe in
the Sony experience

The Sony brand is a global phenomenon that
has been an integral part of the technology
revolution - think Walkman or PlayStation for
starters - they are leaders in a host of fields.

Firstborn, translator of engaging, intelligent
and innovative user experiences, joined forces
with Sony to help remind the consumer that
there is much more to the digital behemoth
than meets the eye.

Gabe Garner and Nikki DeFea The brand
recognition of Sony is outstanding - nearly
everyone has owned a Sony product at some
point in their lives. The problem is r people
generally think of Sony as an electronics brand
and don't know all the other things it doesc it
creates epic video games; it's one of the
leader's In the movie industry; it signs some of
the best names in music, it makes things that
fans crave, but no one associates their
favourite blockbuster hit with Sony. It's the type
of problem we love to solve. We set out to
make a great brand seem more relevant with a
younger demographic, and insert it straight
into their culture.

"Sony’s brand message is make-believe, it
means that anything you can imagine, you can
make real. We had to bring this to life in a 360
program that was heavily rooted in digital. And.
we had to do it in a way that only Sony could,
one that reached our younger audience?

Jennifer Xin,
art director

Aaron Pol lick,
creative director

Sony is not short on new commodities - NEX, Amazing Spiderman.
Firstborn decided that it would make unexpected combinations

Garner and DeFeor "Taking .he varies well-known Around me same time. Bony was .aur

Sony properties, we asked ourselves what It would be
like if we combined them to create something
completely hew. What if we took a musical artist add
combined it with the new Sony tablet? A blockbuster hit
with a cutting-edge camera? This became our formula for
developing our ideas into make.bef&eve experiences.

We took a look at the big Sony Launches In the
upcoming year We had a playground to choose from: big
artists were getting signed, one of the most anticipated
games of the year was being released and exciting movies
were hitting theatres. One of the properties that really
caught our eye was The Amazing Spider-Man reboot. We
knew that it would be fun to concept and already had a

f-, r y h=,cji nf paripr followers

Around the same time. Bony was Launching their new
professional grade portable camera, the NEX. We thought
it would be interesting to combine the NEX with The
Amazing Spider-Mart.

"After going through several rounds of ideas,, we landed
on one that captured the essence of make,believe and
allowed us to bring imagination to life.

We created an interactive panorama that told the story
of The Amazing Spider-man chasing crooks through
Manhattan. When it was first launched on the make-believe
hub. it was incomplete-it was missing characters that were
needed to finish the story. We asked fans to submit images
of themselves in the various poses to star in the panorama.
By simply submitting a photo, they could be chosen to be
Amarinn ^mder-Msn adventure?

Dofl Y.R Yun. Senior

developer

32.

design diary

experience SONY

iliniy>

)ny |

Location scouting, user-generated content, and moody
visual cues all make the site jump off the screen

Aaron Rollick: "The three main creative
challenges of the experience were the
panorama photo shoot* the composition
of the final panorama, and the site
interface design,

'Once we decided on the general plot of
the panorama adventure, we went through
many rounds of sketches to determine
every element we would need to
communicate the story. All the details, from
the characters' wardrobe to the buildings in
the scene, were planned so we knew what
elements we would have to shoot both on
the street and in the studio. We
collaborated with photographer. Dave Hill,
to capture all the pieces with a Sony NEX
camera - we loved his style and knew this
kind of prefect was right up his alley

'Few' the background we scouted areas
around IMVC that fit the look and fee! we
were going for. We wanted an urban
environment that was a bit rough around
the edges. Full streets as well as individual
buildings and urban elements were
captured to be composited into the final
scene, All the characters and props were
shot in Dave's studio, allowing us to rig
actors for dramatic moments-in-time like a
robber ftying off a bike. Each element was
shot on white to make for easy extraction
of the background.

'Once we had all the elements, we began
compositing the scene. Each piece was cut
out and combined into the master
composition. The result was a massively
long panorama that visually read from left
to right. Bringing together user-submitted
poses, studio-shot elements, and
on-iocatfon backgrounds was quite a
challenge. The lighting and colour had to
be ]ust right to make the scene believable.

"The NEX camera did a great job of
getting us the content we needed, making
it possible to bring all the pieces to life.

The site experience interface design was
crucial to the success of the campaign..

Users needed to be able to easily
contribute their photo to the panorama or
the scene would be forever incomplete. The
interface design centred on creating an
exploratory experience, allowing users to
easily upload their pose at any moment.
While navigating the site was key to the
experience, keeping if as minimal as
possible put the spotlight on the panorama.

Tt was important to marry the look and
feel of the panorama with Lhe interface
navigation, all the while staying as true as
possible to The Amazing Spider-Man
aesthetic. Dark, moody and suspenseful
visual cues managed to bring everything
together perfectly."

I-

| experience SONY

%3 g3ffi5Mi

A lazy loading system and a custom 3D
panorama engine ensured that the Sony
experience was quick and efficient

Dofl Yun and Francis Turmel: The Firstborn development team
handled the backend duties entirely in-house. In order for us to
get the aesthetic totally right, a custom 3D panorama engine was
built to make the interactive panorama. It also allowed us to show
the layers of the scene in making-of videos and media units.

"A runtime asset coordinator was built to help the process of
disposing objects into the 3D panorama world. By using this tool,
designers could position each object exactly as they wanted it
instead of relying on the development team to do it. Once the
object was positioned. XML data - holding all of the information
about each asset - was generated, In order to change or shift
something, we simply had to replace the XML data with the
necessary updates.

"For each section, a lazy loading system was used to make the
experience load swiftly and efficiently. The panorama scene had a
5.000 pixeLwidth. so each object had to be loaded individually as
it is displayed on the screen. This way, the experience didn't require
all the assets to be loaded before a user enters.'

# IP In order to get the aesthetic
totally right, a custom 3D
panorama engine was built i f

—d

m3 ■

<de$ign diary>

experience SONY |

/2000**

w TOTAL *
-< MAH S
% HOOKS A

Plenty of props ^
were used to make
sure the panorama
had a cinematic;
quality to it that
,1 participants
L c.Qu fd see

themselves in.

Kim Manley and Kristin Keefe: The team knew that
posing and submitting a photo was a big ask, even with
the final payoff of being in the Spider-Man panorama. In
order to push it out to the masses we worked with Sony to
stage multiple in-store events across toe country.

‘Consumers could pose against a green screen and
submit their photo with toe help of the Sony event staff.
This in-store initiative, a&ong with a push across mustiple
metfa channels, helped us to get the wo rd out to our
target audience.

"We created a custom video and interactive version of
the panorama to be featured in YouTube's masthead, and
optimised toe Ml experience for Facebook - our audience

could upload a photo right there without having to "eawe
the Facebook environment. A mobile site let users explore
the panorama and watch behind-the-scenes video content
featuring a filming of the panorama shoot and the

compositing process.

"We also had added extra incentives for the participants,
like toe chance to wto a brand new Sony MEX camera. And
of course, when users went ahead and submitted their
photon social spring was key to get them to help spread
the message."

design diary.

wsonwswTNPf* nut

Atoouf the com

cm |

SdINoir* |

Dark side of
the sun

Web Designer takes the short hop
to Paris to talk to French web
architects Soleil Noir. They reveal a
love of Flash and coffee, and how
they keep their creative integrity by
not doing sales strategies

wlui Soleil Noir wltal A creative assortment of designers,
developers, producers, copywriters and motion and sound
designers where 1 Rue du Mail 75002 Paris
w«ta w w w.so leil noi r. n et

oleil Noir was formed in 2000
under the leadership of its two
founders, who shared a common
vision: to provide brands and
their audiences with interactive,
Immersive experiences.

Experiences that tell stories, that
bring unique moments to life for
their users.

For the past four years, Soleil
Noir has been working with N espresso, an inspiring
brand with which it has established a solid, trust-
based ^tejtotiship. The more successful
achlevemlffls are ^ clear sign of the relationship: they
include VariafrortS 2010 and the cute Pixie, adapted
for multiple supports (web, mobile and Apple's brand
new ad format. iAd).

In addition, Soleil Noir have been working with the
LV'MH Group and more specifically Dior, for the past
five years, as well as Disney Television, the Danone
Group (Evian) and Samsung Electronics.

Soleil Noir can diaim over Len years of experience in
the industry. CEO and creative director Benjamin
Laugel gives an insight into the story behind the
agency. “It's a long and exciting story, of coursel Soleil
Noir is a chemical reaction where the key ingredients
are enthusiasm, hard work, and - as is the case in any
kind of success story luck. It all started with a
meeting, of course, but not just anywhere. It was on
IRC, the forerunner of modern social networking
systems. Gradually, during a lively discussion about a
VCD encoding codec, we got our first website creation
gig, which was given to us by a small music label.
Hostile Records.

It was a website that quickly grabbed people's
attention due to the innovative choice of Flash and its
media capacities At the time, it was a long shot, but
we realised that it 'was a wise choice because we
consequently worked with the entire EMI Group,
coming up with such gems as Ben Harper's site, the
site for the EMI record company a site for Snoop
Dogg, and one for Placebo.

profile-

_37

Soleil Noir timeline

Established 2000

Fo under s Benjamin Laugel, Olivier

A mixer modulo for Roudoudou
resulled in a panicky p:ione call from
Virgi n's network ad mi n islrator. since
he couldn't fathom how it could have

The first production for
Host i is Records was created
using Flash 3 -ar Lists'
sheets, clips, retransmission
I of live cancerts. and chat.

The Disney Channel's
day- to-day broadcast site.
Zapping Zone,
incorporated a number
of modules and games.

Hostile Clan, Soleil
Noir's first site to earn
an FWA award, was a
t remendous source of
pride for the team.

The fourth version of
Soleil Noir's site
surpassed resolution
expectations held at
the time.

Soleir Noir completely
revam ped t he game en gi ne for
the first My st flash game, and
created My st 4 More than 10
million fans approved!

The Proactive

site was the

first US brief

■At

for Soleil Noir.

and a success.

#f An agency’s site is essential. It gives a
first impression to a... client or someone
who might wish to join the company if 1

"These websites strengthened our enthusiasm for
animation and for aesthetically pleasing stuff. Indeed,
it's hard to offer half-arsed site to a legend or to a
group that you admire."

The agency uses a suitably sophisticated moniker.
Laugel reveals how the name came about and how
easy it was to get a matching domain. "The name
Soleil Noir (meaning Black Sun) effectively reflects the
mindset of the company back in the beginning;
various points of view, shaping a shared ambition. We
got into a lot of discussions, sometimes quite heated
ones, but they always led to magical solutions.

"Soleil Noir is an oxymoron that is a perfect
description of these opposing natures, our
personalities and our exchanges.

The chance to use the mysterious and intriguing
side of a name that was also being used for other
digital structures at the time was also a compelling
reason for us to choose the title. We wanted to set
ourselves apart.

“Next was the domain name. After we r d come up
with a brand name, we were lucky enough to get it
registered as a .com, .net and _fr. Back then, it was
much more common to get an available domain

name that reflected your original idea. This is no
longer the case these days, and it’s getting harder and
harder to avoid punctuation quirks that are rather
pointless for the entry of a domain name. So you've
got to have a lot of imagination."

An agency’s web presence is the primary point of
access. Laugel tells us how important it is to the
company and reveals that a new version of the site is
on its way. 'I almost feel like playing my trump card
given that our site is no longer in any way up-to-date.

"An agency's site Is essential. It gives a first
impression to a potential client or to someone who
might wish to join the company.

“In my opinion, it needs to be rather neutral in order
to showcase our creations and to describe, as
effectively as possible, our know-how and all the work
that’s been done.

"Case studies are key components when we
promote our projects and our values. It's a bit like

38 profile

' r he lau nch oE t he K espresso
Variations site won the
company more than ten
international awards - a
flagship accompli shment.

Soleil Naif'S 2012
greeting card showcases
every thing the brand,
works for. loves, and
believes in

Experience 159 was
SNTs first FWA site of
l he motif hand Adobe
Europe's winner for
design in Milan.

The idea for Samsung
HighliEe was
concealed on digital
user experiences
reflecting those in life.

TheNespresso Citiz
site was the start oEa
fruitful collaboration
between the brands

Soleil Noir went
mobile with the
Dior iPhone app.
The Dior world in
your pocket.

that Is stlU strong.

Number of
employees

what happens in the ’behind-the-scenes' portrayals of
films. We need to come up with things that are both
interesting and inspiring.

‘Were going to redo our website soon and pay as
much attention as possible to the content that we're
going to be creating in order to promote our work. So
this is a 'project within a project', as we intend to come
up with components solely designed to describe and
showcase the actual project in question,

‘We've also invested in social media and are proud
of amassing a community of nearly 4.000fans on our
Facebook page and nearly 6,000 followers on Twitter.

'Our approach to communication is simple. We talk
about our projects, about life at the office and about
trends and other creations that matter to us.

“It's this level of interest displayed by our fans in
what was going on within and outside our offices that
inspired us to create our greeting card, A playful year’
- vi m eo.co m/1846674Q

Clients are an essential ingredient in the success of
an agency. Lauge) stresses exactly how important
they are and how Soleil Noir is now in a position to
choose who they work with. ‘Clients are more than
just the lifeblood of the agency. They're the ones with
the power to make or break our passions, trigger our
moods, make us laugh and cry and, in short,
determine our emotions on a day-to-day basis*

'At Soleil Noir, we don’t "do’ sales strategies. We get
a lot of requests, and have the luxury of being able to
choose with whom we wish to work. Regardless of the
size of our projects, we always tackle them with the
same amount of enthusiasm and Lhe same desire to
come up with something original that inspires us.

"Ultimately, the clients who want to work with us are
frequently clients who share our qesires, who want to
be daring and exceed certain limitations, yet always
with the level of impeccable quality that has
established the agency’s reputation."

M What platform other
than Flash would allow us
to create real experiences...
while making It possible
for us to blend images,
sound, video and
interactivity easily? »

profile

i I We have an organisational structure
that remains constant and ultimately
ensures a high-quality project §§

Soleil Noir has a well-established reputation which,
as already mentioned, allows them to choose who
they work with. Head of production Olivier Marchand
defines which type of project they like to be involved
with. “I often say that there are no bad brands just bad
ways of handling them. It's not so much that we pick
and choose the brands with which we work, but
rattier we welcome clients with ambitions and ideas,
and especially those who place their trust in us and
give us a chance to wow them.

“We have lots of projects, and the size of a project
has never scared us. As proof of this, we've just come
up with an entire digital business strategy for our
client Nespresso. This namely involves the creation of
mobile platforms (iOS, Android and mobile web), as
well as a corporate transactional web platform for 50
markets in 26 languages. Its not a question of size, but
rather of know-how, imagination and the means of
attaining a certain degree of perfection."

Projects are - by their very nature - extremely
different from each other. Marchand gives an insight

into the lifecycle of a typical project. 'Each project is.
by nature, distinct. As we act in accordance with each
product, specific launch dates, the number of markets
that should be considered and the concept in
question, we really never operate according to a so-
called typical timeline.

'However, we have an organisational structure that
remains constant and ultimately ensures a high-
quality project. The processes, along with their tods,
combined with creativity and perseverance, are a
guarantee of success.

“This involves the brainstorming stage, in which
everyone, even the youngest Interns, may participate
actively. It's a fact that, as far as digital technology Is
concerned, and owing to the openness of this
medium,anyone can have the right idea since all of us
are navigating through that realm every single day.
What follows is a question of culture, knowledge and
the big picture.

“The preparation stage Is crucial for the project. We
spend a great deal of time coming up with the

medianios, challenging the technical aspect and re
examining what we've done.

Then we follow what we might call a 'traditional
cycle' that entails a seduction phase (the first layouts),
organisation (timetables), industrialisation
(wireframes) and finally we work to persuade the
client of the merits of our solution (if this step is
necessary, of course!}’

As with any project the creation tools are a matter
of preference. Marchand explains that Soleil Noir has a
special relationship with Adobe, but still needs to find
the best solution. “We mostly use Adobe software
because we’ve had a special partnership with Adobe
for nearly five years now.

'A certain amount of organisation is required for
creative tasks, which is why our processes are also
supported by software solutions lake Merlin, Axure.
activeCollab and ConceptShare for reviewing layouts.

“Were constantly striving to optimise our processes
and thus to find the best possible software solutions
for ourselves and for our clients.'

The Flash platform is a key component in Soleil
Noir projects. Marchand extols its benefits, but also
adds a cautious note. "What other platform would
allow us to create real experiences without having to
worry about browser versions or platforms, while also
making It possible for us to blend Images, sound,
video and interactivity easily?

40 profile

## We mustn’t put our eggs in one basket
and focus on one software solution !IP S

‘For more than 12 years. Flash has allowed us to
breathe life into most of our projects.

‘However - and we're very aware of this - we can't
and mustn't put all our eggs in one basket and focus
on only one software solution. Rather, we need to use
the resources that allow us to accomplish our goals
and fulfil the ambitions that we share with our clients."

HTML5, CSSS and jQuery are seen as the
technologies that will build the web over the coming
years. Marchand gives an Insight into how certain
technologies are going to coexist ‘AH technologies
that allow us to make our ideas a reality are worthwhile!

'HTMLs return to the forefront as a tool used to
create digital experiences is a good thing, with the
ultimate goal being the vision of a single navigation
mode on all supports. What's currently being
observed, though, suggests that this goal is
unfortunately pretty far-off. The multiplicity of screens
and certain proprietary restrictions, such as those
found on Android or the iPhone, lead me to believe
that this project is even less within reach at the
present time.

1 feel that, rather, we're going to witness a smart
coexistence based on the projects themselves rather
than submitting to an arbitrary selection of
technologies. Flash's day In toe sun isn't over yet as
long as Adobe permits it.'

Social media has reached the point where it is an
integral part of any digital campaign. Marchand

WEB - . www.soMInolr.net

FOUNDERS. _ Benjamin Laugel - CEO.

Olivier Marchand CP

YEARFOUNDED., ____ 2000

CURRENT EMPLOYEES . .23

LOCATIONS _____Paris, France

SERVICES

> Digital Strategy
>ArtdirecUon

> Web development

> Mobile development

** m. » m. m. — m* mm- m* m* m. * m-*

explains how important it is in contemporary projects.
Trying to imagine a project without incorporating
such tools is simply no longer possible.

'These tods let us give users the chance to Interact
and to embrace our platforms.

'Whether this is achieved by personalising the
experience via Facebook Connect or by merely
sharing a message, this approach allows us to
continue to bring a story to life and to go beyond its
Initial context. Our greeting card 'believe in’ Is still
being spread spontaneously, without prompting,
seven months after its launch.

'Websurfers have now taken control of brands, so
it's up to us to write stories that inspire and entertain
them, it's up to us to write stories that are increasingly
innovative and fun. It's a real challenge!"

The mobile revolution continues apace. Marchand
offers his thoughts on how Important it Is. and even
suggests that some services demonstrate we can live
without websites. "Indeed, mobile has become a key
factor for many experiences, as we're now able to
access rich content easily. Gone are the days of
newsletters that didn't accomplish much ot anything.
Consumption of video and social games and photo¬
sharing has shaken up this model, and mobile has

KEY PROJECT

DHJANA - Nespresso

-2011

www.nespresso.com/dhjana

Nespresso has launched Dhjana, its new
award-winning limited edition 100 per cent blend,
sourced from the Nespresso AAA Sustainable
Quality™ programme, A blend composed of four
origins (India, Costa Flea, Brazil, Colombia),
discoverable by navigating through a unique tree.

The technologies behind the site were Flash CSS
for the frontendand Flash Builder 4 and PHP for the
backend. Besides the somehow small structure (a
few pages with one level of content each), Soleil
Noir wanted to create a real forest ambience, so it
used laigec-than-usuai Images to simulate this
feelln g. To put this into context, if the website had
no scrolling, it would need a 4,000 x 8,0Q0px
resolution-approximately 16 displays at1.680 x
1,050. This, added to the different layers of
animations and contents, and localising the
content in mote than 30 languages, required a hell
of a lot of work to optimise the loading time and
overal I performance.

become a true passport to its own digital life. An
experience without a mobile component Is now
considered outdated, and services like Instagram and
Path show that we can actually do without websites.

“We currently advocate toe development of native
applications for both Android and iOS platforms, while
also providing a mobile web version of a site that’s
available to everyone.

For us, the user experience Is key. and this Is the
best solution to ensure it. But ours Is a rapidly
Changing world - we've got to adapt to these changes
and stay attentive if we want to keep offering the best
possible selection.

"Responsive design and mobile first have become
essential points to consider during the design phase.
The related development time is. however, still too
lengthy for the advertisers’ liking."

Finally, the success of any agency is very much
dictated by the people who work for it. Marchand
offers some sound advice on the traits needed to
succeed in the industry. “Be curious, be enthusiastic
and really want something. Those are always the best
pieces of advice that someone could offer. Without
hard work, risk-taking and a sense of humbleness,
nothing is possible.

Questioning yourself, challenging your own ideas,
and establishing and defending your choices are
complicated, often painful tasks., but that's what we do
on a daily basis, and this is clearly the only way to
achieve a convincing result Work hard/play hard are
the keys to success I'

profile 41

m ■ j m

Eric Meyer is considered by many as
the go-to expert on CSS. Web Designer
caught up with him to discover exactly

what his thoughts are on the current
state of CSS, and what the future holds

feature

C SS and Eric Meyer have gone hand-in-hand for
over fifteen years. He is an internationally
recognized expert on the subjects of HTML and
CSS - what this man does not know about CSS is
not worth knowing. Eric is an established author
and has written a number of acclaimed books including
the self-titled Eric Meyer on CSS, More Eric Meyer on
CSS, and more recently he has added his expertise to
the Smashing Book series with Smashing CSS, Beyond
the written word, Eric is a prolific speaker and can be
found headlining many a web conference. Eric Meyer is
undoubtedly the king of CSS. Long may he reign.

You've been at the forefront of the CSS revolution fora
long time now. How do you rate the latest version of the
specification and what do you think can be done fo push
it forward?

The stuff that's being worked on right now is really hard
but really awesome - really powerful layout mechanisms,
visual filters. useM but processor-heavy selectors, and so
on. It really feels like we've solved, for the most pari most
of the basically easy problems, like setting solid colours or
having background images or defining borders. Even a lot
of the medium-hard problems have been dealt with. Now
were moving into the really rough territory, where it's an
incredible challenge to create powerful, complex toofe that
can still be described fend thus written) using simple
syntax. Decisions of any sort can have huge tong-term
consequences, so it's tricky to navigate. So I rate the latest
worik very highly for ambition and potential. Forward
progress may be a bit slower than we've seen lately, but
there is need for caution. And, of course, any complex
system is at least as hard to implement as it is to define,
Browser teams are limited in terms of time and resources,
so some things will be deferred, and that will be frustrating,
Boar in mind what I've always said, though, "Never put
down to malice what can be more adequately explained
by resource constraints'

Browser support Is a key factor behind the adoption of
the latest CSS standards Vendor prefixes help widen
support but why is it that alt browser vendors cannot
agree on a standard code of support?

They can. and often do. The devil is always in the details,
and in the assumptions programmers make. For example
the CSS specification currently says of box and text
shadows:

‘A non-zero blur distance indicates that the resulting
shadow should be blurred, such as by a Gaussian filter. The
exact algorithm is not defined.."

Right there is an inconsistency waiting to happen. Yes.
the spec goes on to give an approximate guide to how
shadows should be biurred. but the algorithm is not
precisely defined, so it's up to each browser team to devise
their own algorithm. What are the odds they'll come up
with precisely the same formula? You might think the
answer is to define a precise algorithm, but what happens f
later on a serious flaw Es found, or if a better algorithm is
devised? CSS has long employed intentional ambiguity to
allow browser makers to experiment and find the best

K The only way to have consistent
implementations is to have one browser ”

ways to do things. There's also the problem of interaefon.
CSS can define the behaviours of properties too. bar. and
baz. and browsers can implement them all so that they
consistently pass all their individual conformance tests,
What happens when they’re used together, though? You
could get wildly different results just based on slightly
dfferent resolution code deep inside the various rendering
engines say. if baz is handed before bar in one browser,
and that order is switched «n another. And that's just with
three properties interacting. How many properties did you
have in your last style sheet? Basically, the only way to have
perfectly consistent implementations is to have one
browser, We had that once, when there was only World
Wide Web. the browser Tim BemersLee wrote. But it was
Mosaic that ignited the popular web r and Netscape that
shot it into orbit Anyone who thinks browsers are hombly
inconsistent now should look at ttiat period of history The
divergence was extreme, bad enough that the same page
would look wildly different across browsers, and it
happened regularly. Madness! But now we know better.

The introduction of high-resolution displays has
brought a new challenge to designers and developers.
Pixel ratio is the current solution, but do you think there
is better answer?

I honestly think that pixel-based images are about to
become an endangered species. Anything that can be
vectorised will be - and I remember seeing demonstrations
in the Nineties of vector formats for photographs and the
like. It would not surprise me in the slightest to see those
ideas make a comeback.

Web fonts have revolutionised web design, but how can
the standard move forward and what eise does it have
to offer?

I'm not a typographer, so that's hard for me to say. I know
that type enthusiasts are all stated about ideas like the
ability to define ligature pairs and finer-grained control aver
kerning and the like, but when they talk about that stuff I'm
like your grandma listening to you talk about work - there's
a lot of nodding in pauses for breath and me saying. 'That
all sounds lovely, dear. Would you like another cup of tea?"
I'm not trying to say that those things are irrelevant or
useless. They arent! They're just in a realm that I don’t really
grasp, I mean, I'm the guy whose results on 'which font is
this. Anal or Helvetica?' quizzes are statistically
irxlistinguisliable from random guesses, Which, let's be
honest is what they are.

Responsive design is a key component of the site-
building process. However ,; currently it is in the early
stages of its lifecycle. How do you see responsive design
evolving in the short-term and long-term?

It’s a great question, and one I think we’ll all have to answer
together We’re still figuring out what works In what
circumstances and finding out how old assumptions by
browsers are clashing with the aims of responsive design
- like, how browser pnefetching (which is meant to speed:
up browsing) means an enormous increase in page weight
when you're pointing to a tot of different media-specific
style sheets. Responsive design is also pushing the edges
of questions few of us thought about before; can the same
content serve equally well in multiple media? Can the same
page be useful cross-platform? I personally think the
answer is, 'sometimes', but maybe I'm wrong. Maybe, as a
result d responsive design, well find new and better ways
of presenting content across all media. It has that potential.

The CSS standard is a constant work in progress How
long do you think it wilt be before CSS4 hits the web and
what would you like to see in it?

We can! really talk about a CSS4 because there are no
monolithic CSS specs. The last d those was CSS21, and I
doubt well see one again. Nov; we have dozens of CSS
modules, each proceeding at its own pace. Take Selectors
for an example; Level 3, what we might call CSS3 Selectors,
is a full recommendation now. and Selectors Level 4 is well
underway. In the meantime, a whole bunch d Level 3
modules are wandering around in working draft phase.
.Some of them could still be there when Selectors moves to
Level 7. So now we have to talk in terms of the next period
of time. I think aver the next year or so we’re going to see a
ton of movement in the area of advanced layout, finally,
with modules like GridLayout, FlexBox, Regions, and
Exclusions. Those four together could create an enormous
shift in the kinds of layouts we create as well as how we
structure them. CSS Filters are very interesting, too, though
I'm not sure how popular they are to implementers other
than Adobe, and as I said before, Selectors continue to
barrel ahead. I'm also hoping to see some advances in
colours and backgrounds, but the priority right now is
layout which is really where it belongs, We've needed this
stuff since CSS was first written,

Finally on a more personal level , are your goals the
same as they were five years ago and what do you think
you will be up to In five yeabs time?

Broadly speaking, yes. they are, and l think they will be. My
goals have always been to explain how to make websites
with CSS by explaining how CSS works, and to thus help
the whole community advance the web. It's sort d iike
being a woodwork teacher who shows the class how to
use all the tools safely and properly, so they can produce
whatever masterpieces their hands and vision can bring
forth, I could do that my whole life, I think, and thereby
count myself luckier than most

feature

.43

E very designer and developer will have their
own set of tools that sit with the must-have
big guns. Here we present an essential
selection of tools as chosen by a wealth of
industry experts. There are tools for every
element of the design process, from concept to
completion. Imp rove your workflow, build rapid
prototypes, unleash killer code, create graphical
gorgeous ness, and test, test, test, All the big boys are
included. Word Press, jGuery, Google, GitHub. Sass,
plus a host of essentials But. as always the devil is in
the detail and the experts have revealed a multitude
of tools that will become constant companions.

OPEN STREET MAP

www.openstreetma acorn

OpenStreetMap is a collaborative, open source
alternative to the commercial mapping systems offered
by Google and Bing. When used in collaboration with
Open Layers, Open Street Map is capable of producing
some very sophisticated mapping applications, and is
often more up-to-date than its rivals due to the
crowd-sourced nature of the cartography.

GOOGLE ANALYTICS

www, a nalytics.goo g le .co m

Google Analytics is an easy-to-use yet powerful "
reporting platform. It works by tracking visitors to
your website through a tiny bit of JavaScript
inserted into your page's HTML. The resulting
data collected is presented through a series of
interactive charts and reports that allow you to
analyse metrics such as user-by-country,
page-visits by age, or search terms by landing
page. The ability to tie in with the Ad Words
campaign system (paid-for text adverts that
appear alongside organic search results on
Google), analyse return on investment and visitor
conversion ratios, as well as recent innovations
such as in-page analytics and real-time data
make this a superb package; all the more so as a
result of its zero cost priceteg!

ADOBE PROTO

www. a dobe.com/protQ

Design prototypes for your web project directly on your
iPad or Android tablet creating different page elements
with gestures- The output can be linked together to
create a fully interactive prototype and sent to
Dreamweaver with the basic wireframe code crested
for you, once approved by the client.

ADOBE DEBUT

www.adobe.com/debut

Adobe Debut is a presentation app for your tablet,
created to allow designers to showcase their designs
directly to the client in a polished, slick style. The app
supports artwork from Illustrator, Photoshop and
InDesign without the need to convert files ahead of
time. Currently only available for Android devices.
Adobe promise support for iOS is on the way.

320 AND UP

www. stu ft a nd non sense co.u k /project s/320a nd up

The 320 and up responsive boilerplate is a tool that has
been used by many designers to create a 'mobile first'
site. The tool has changed as its creator Andy Clarke
has modified to ensure that the latest version of the 320
and up is better than ever, If you haven't tried, make
sure that you do and soon.

OpenWYSIWYG

www.gpgnwe&wflrs.Hm

An extremely easy to install rich text editor written
entirely in JavaScript

CKEtutor ^editor,cam

A fully-featured and supported rich text editor with
plug-in architecture

BrowserStTOts www.browsershots.ora

A simple way to view a preview of your site in
many browsers simultaneously

If This Then That OFTTT) ifttt.com

Program simple actions in response to tweets.
Instag ram photos and more!

Maiichimp www.mailthimE.CQm

Create, manage and measure email newsletter
campaigns with ease

SumoFaini www.sumopaint.com

Web-based image editor with a bevy of features
and functionality

Sencha Touch

w w w.sencha.com/prod ucts/touch

Very flexible JavaScript framework for building
HTML5 mobile web apps

PhoneGap wmphpngqaPiCpm

Use web technologies to develop and create native
apps across seven platforms

Magento ym w.magaitocftmmer

A fully-featured and very capable open-source
eCommerce platform

QpenCart www.opencart.com

Free, easy to install and feature-rich open-source
eCommerce platform

Generate dummy placeholder text for your
projects quickly and simply

WoliramAlpha API

erg^w s ti.wgjf ram alcha» wm/g i?i

Connect with and integrate scientific charts,
projections and data analysis

OpenID openid.net

Single authentication framework for use across
multiple websites including social media

Ruby on Ralls rubvonrails.ora

Useful PHP framework for rapid development of

applications with common functionality

Less Framework lessframework.com

CSS grid system designed to work across multiple

devices responsively

MediaCore madiatflifcfiam

Impressively capable Python-based video and

multi-media Content Management System (CMS)

imageAipha wmflnyminiiwm

A very handy tool with which you can reduce

24-bit PNG file sizes

CSS3 Button Maker

^wffiC55tricK5,tgm/aymple5/ButLpnMaKsr

Chris Coyier's tool for creating image-less buttons
with pure CSS3

Procssor

A web-based service for reformatting your CSS

feature

.45

200 ESSENTIAL TOOLS AND TRENDS ►

github

O SOCIAL CODING

GITHUB

wwwaithub.com

GitHub is the

immense ty-popular

hosting and code sharing service, currently used bv
more than a million people. GitHub hosts software
development projects that use the Git revision
control system. The power of GitHub comes from its
collaborative tools and capabilities. It not only offers
a place to share and fork code repositories, but also
Integrates wikis, issue tracking, arid code review.
GitHub has become the Industry standard for
making code projects public and getting feedback
from potentially thousands of developers all around
the world.

FONT SQUIRRELS ©FONT-FACE GENERATOR

www ton tsqu I rr el.com/fmtf ace/qe nerator

For a long time, using custom fonts on web pages has
been a big challenge for web designers. Font Squirrel's
@font-face generator is a big help in this regard. After
you've chosen a font with appropriate licensing, it will
give you the necessary cross-browser CSS.

GOOGLE WEB FONTS

www.gooqle.corn/webfonts

Googles new font repository is an easy way to add
custom fonts that are free for commercial use. and can
be embedded using a single line of code. Download
from a selection of hundreds of fonts in different styles
and scripts.

wTirthtciiQiicniWlid.

CfiHrrpv wUii'di ffiatar IMtht Dm* IW IlM *vU QuMt i/d JjkL

ti Vd* mT Ana

ruW fancit Fffw for tlu QKirrn *ni

. feature

CONDITIONAL CLASSES

w w w.pa u 11 rish ,co m/2QQS/conditl o nal-stylesh eets-vs

css hacks an 5 wer-nei th er

Extra HTTP requests are bad for page speed. So instead
of targeting old versions of IE with separate stylesheets
(which are also harder to maintain), use Paul Irish's
conditional classes method instead. It's dean. easy, and
it validates!

STACK OVERFLOW

f—| stackoverfiaw w ww.stackoverfIow.com

It's tough to avoid Stack

Overflow when Googling for solutions to coding
problems. It's a fantastic community that's invaluable for
collaborative problem solving. It should be one of your
go-to resources for getting your questions answered by
knowledgeable developers.

GOOGLE READER

ww w.g Qog le.com/reader/

Print resources are great for
getting concepts in your

Reader ha3d ■ no1:hi n s 11 ke

J onl in e sources for keeping
up with trends, coding tricks,
and more. Google Reader (or any RSS reader) will help
you stay up-to-the-minute on hundreds of feeds, for a
nice complement to offline reading.

Goatfk MM m wk * *•- i

YEPNOPE.JS

vepnopeis.com

While Modernizr can help you detect features, yepnope
lets you asynchronously load different scripts based on
your feature detection results. This works great for
avoiding loading poly fills unnecessarily, helping your
pages load more efficiently,

yepnope.*.

SASS/COMPASS

w ww-S ass- la nq .cam
www.compass-stvle.org

If you haven't started
preprocessing your CSS,
then get on it! The
com bi nation of Sass and
Compass brings real programming techniques to
stylesheets, making your CSS much easier to code
and maintain. Sass extends CSS by adding nested
rules, variables, mixins, and much more. Compass
helps you avoid unnecessary repetition *n your CSS
by providing reusable patterns for CSS3 vendor

CODEKIT

ww w.incidentBZcpmfcqd ekit

CodeKit is gaining traction as one of the hottest apps. It
helps you process files using a number of different
time-saving tools - Less. Sass. Stylus. Ham!, Coffee Script.
Compass, and more. But it does so much more than
that. And best of all? No command-line abilities required.

WHEN CAN I USE...

wwwxaniuse.com

This is a great online resource for finding browser
support information on virtually anything. It's kept up to
date and includes info on new CSS3 stuff. HTMIL5 APIs,
and other miscellaneous DOM features. It's even great
for browsing just to find out what's new.

JSFIDDLE

www, | sfiddle.net

Every developer needs a place to experiment with, debug,
and share code publicly, without all the overhead of
something like GitHub.|sFiddle has tons of great features.

and a nice, dtean. usable interface.

compass*

oref xed code, CSS typography, and mere A It ny ugh
tic sc too s a'c command - ire based, desigrers who
aren't quite so familiar with the coir mend-I he car
use one of the available GUI apes (for both Mac and
Windows) that automates these tasks fo-you. So tne
only real learning curve is related to learning the
syntax, which has quite a few differences from
traditional CSS.

compass

n an CSS Aatf*of>n$

Frmneimortt

PSEUDO-ELEMENTS

w w w.n ico lasq aliaq her com/an -in trodu c tion-to-css-

pseu do-e I erne nt- hack s

Pseudo-elements, recently promoted by a number of
developer bloggers, are a CSS feature that can do so
much with so little code. They're useful for decorative,
non-essential content, and the numbs - of things possible
with them is only limited by your ability to innovate.

JSLint

JSLINT

www.islint.com

JSLmt is Douglas
Crockford's code-quality checking tool for JavaScript.
You might not agree with all of JSLinfs strict
recommendations, but this is an essential tool for
JavaScript developers who want code that’s up to
standards and easy to maantain and debug.

;

YUI Library YYVYVY.Yyjlitir^rY^Bm

Yabool's open-source JavaScript and
CSS Framework

Nomialize.css

Nicolas- Gallagher's modern. HTMLS-readv
alternative to CSS resets

YSIowwww.develPPer.vahoo.com/vslQW

A browser add-on that analyses webpages for

speed improvements

HTML5 Cross Browser Polyfills

w w w.a i Ih u b. eom/M odern 'art Modern iz r/wiki

A huge list of polyfills for tonnes of brand spanking

new web technologies

W3C CSS Validatior Service

.iigsaw.w3.prfl/cs5-validator

The WSC's tool for checking for invalid CSS

HTML5 Please www. html 5 a lease ,co m

Helps you to use the new HTML5 and CSS3

features responsibly

Isobar’s Front-End Coding Standards
LiaJsobarxQriy^Uudiirds

Pillars of front-end development are outlined in this
extremely useful guide

wave w w Lr-aim

A web accessibility evaluation tool from WebAlM

Jonathan Snook's great guide to scalable and
modular CSS

Wufoos Current State of HTML5 Forms

www.wufoo.com/html5

A detailed guide for support of new HTMlS form
features

StatCounter Global Stats

oa.statCQunter.cQm

Worldwide, up-to-date browser and OS stats and
trend charts

jQuery Boilerplate
w w w. i qli sr yI?q i I&rp I a le.com

A jump-start for your jQuery plugin
development

OperiCrypt IP Geo -Location API
w w w.opencr ypt.com/iD-lQcati on .php

Get your visitor's location in the world from their IP
address

Flowplaver fiowalaveroro

An easy-to-implement media player to show
self-hosted video

TinyMGE ynvmi:£.inQAiacode.£oni

Rich Text Editor with extensible platform for
additional plug-in functionality

Subtle Patterns sutniepatterns.com

A gallery of free elegant background patterns
Reponsivepx www.resDQnsivepx.com

An easy-as-pie way to test where your responsive
design breakpoints are

Espresso

m a orabb i t.com/esp ressja

The powerful Mac-based text editor with
CSS3 support.

feature

200 ESSENTIAL TOOLS AND TRENDS ►

ADOBE SHADOW

wwwadobecomyshadow

Adobe Shadow makes t easy to prototype and
test, on your mobile devices while building on
your desktop computer. The concept is very
simple - press a button on your computer and
your devices will automatically navigate to and
load the page you're working on. providing
hands-free access to a real-life view of how your
work renders on each device.

As well as making it simple to automatically
navigate your device to the page you’re currently
working on. Shadow allows you to remotely
inspect and debug individual devices, making it
easier to track down and fix bugs than by
traditional methods. This is an example of the
work coming out of the Adobe Labs playground,
and offers a genuinely useful solution to an
increasingly common problem - designing for
mobile devices.

oocss

www.qithubxorn/stubbornella/oocss/wiki

Object-oriented CSS is a CSS coding technique
popularized by Nicoie Sullivan. Even if you don't agree
with all the principles and suggestions of OOCSS. you
should definitely understand the concepts. It's sure to
make your code cleaner, faster, and easier to maintain.

fcj BACKBONE.JS MONEJS

^ -*— www.backboneis.ora

Backbone.is is a web app framework that helps you
structure your JavaScript using the well-known
Model-View-Contrdler CM VO pattern. If you want better
structure and maintainability in complex apps. it's well
worth looking into the power of Backbone.

TWITTER BOOTSTRAP

www.t witle r.g ithu bxom/boot stra p

Bootstrap is a starting framework for web sites and
webapps that includes ready-to-use HTML. CSS. and
JavaScript-based modules for common Ul components
and interactions. Bootstrap helps you avoid ran venting
the wheel, and lets you focus on innovation.

^ BACKBONE.JS

*r _

—-■ - -

1 r-

ADOBE BROWSERLAB

browse r la h.ad a be.coin

BrowserLab is an easy way to get static screenshots of
your web projects as they appear in various browsers
on different platforms. It's not a full-function way of
testing your interfaces, but it's definitely an option for
getting a peek at browser versions you don’t have
immediate access to,

THE EXPERTS CHOICE

BIN FRAIN
Freelance front- end
developer
Sass and Compass

iYiv^ l irv l y l L i- i 'ifi r if? u&n tv'i'ViY romaM item

It's hard to imagine writing vanilla CSS once
you've got to grips with Sass and Compass.

Sublime Text 2

nute amply the best all-round text editor
available. Cross-platform, infinitely extensible
and incredibly fast,

Adobe Shadow

wwiAdabsaahte

Check your design/build across multiple
devices without having to dck refresh
on each.

iV JONATHAN MITCHELL
if pup Developer at Adeo

Iti 1

^ vfMv.aetfrebua.cof7}

nlbbler

nessus

ALAR A MILLS
Product designer
HTML5 Elements Table
Poster wvM.A!3faMiif££Qtrt
W3C- Markup Validation Service

W3C - CSS Validation Service

Pam Turner
Sr Web Designer at Adeo
Notepad++

www nfitpnad-nliJS-nfiis.&rQ

Google Chrome

yvwwffttftte mm/rhmrr^

Twitter Bootstrap

. feature

BEN TRUYMAN
TecbLead at Critical Mass
Adobe Shadow

witmtidchfLCGn-ifthudcvs

ResponseJS

wvw/.rtiSDonseis.com

Font Awesome ferfermmfigtfMmy

BRANDONRJONES
Web designer

CSS Hat

wtow.csstetcom

l Subtle Patterns

\ YmMMtMimtm

; Foundation 3

CHRIS MILLS

Opera Dragonfly
mmsKi^cDEnldmnnn^
: The Opera Mobile Emulator
\ v^.oDera.com/tievebD&/tcc}^mobite

\ Social networking

i ym/Mterton}

CSS HAT

www.csshat.com

It you're still designing your layouts almost completely
in Photoshop, and you're using C553 heavily, then CSS
Hat is a must-try tool. Simply put, this Photoshop add-on
will convert your Photoshop layer styles to CSSS that
you can drop right into your text editor.

Why they love CSS Hit?

MODERNIZR

w w w.mod ern i zr.tom
Dealing with cross-browser
been an ongoing battle tor developers since the
days of the Netscape-IE browser wars. Modemizr
makes these inconsistencies elegant to work with.
This open-source JavaScript library dynamically
adds helper classes to a document's <htm!>
element, so you can have separate CSS rule sets
for non-JavaScript users or users whose browsers
don't support many new CSS3 features. But
primarily. Modernizr helps you to easily detect
support for new web technologies, including
CSSS. HTML5, and miscellaneous DOM features,
and then deal with the results (either support or
non-support) accordingly.

omit m mm m

CSS3 MEDIA QUERIES ^

www.w3.org /TR/css3-med1aau eries

Media Queries are at the heart ol what e
known as the responsive web design movement
Media Queries let you apply different styles to a web
page depending on a number of factors. Primarily
developers are using Media Queries to target
different devices based on browser width. You can
also target device width, orientation, aspect ratio,
and more. Media Queries can even be combined
with CSS3 transitions for some cool effects that take
place when elements on the page when the
browser window is resized or a device's orientation
is changed, Media Queries are a big step forward in
helping developers create a one-size-fits all
experience, without the need for a separate
mobile website.

PREFIXH

www.prefixr.com

Prefixr is a great time-saving app that gives you
cross-browser CS53 in just one click. With this online
tool (winch has an API that integrates into many popular
text editors), you can develop your code using a single
vendor prefix and then automatically add the remaining
code for other browsers.

net tuts*

Prefixr

LIUERELOAO

w w w.li ve re I oad .com

LiveR&load makes your browser's refresh button
obsolete. Instead of making changes, then hitting F5,
UveReload monitors changes in the file system and
then it will automatically make the changes live in the
browser without a refresh. It will even compile
CofteeScript, Sass, Ha ml. and more.

;

■

Code Igniter «tisiqnHgr.t9[Ti

PHP-based open-source web application

framework. Both flexible and powerful

Sumpter si impler.cQ m

Boilerplate code and files to kick-start your web

project without unnecessary fluff

Open Exchange Hates

QDeiiexchanaerates.org/documeiTtation

Free API far getting exchange rates

programmatically over the web

FlickrAPIwwwilickr.com

Grab and manipulate Flickr images using its API

service directly from your code,

Transmit mw.Eanit.Km/trfln&mit

Great FTP application for Mac computers from the

makers of Coda and Diet Coda

Open Layers www.QpenJayers.Qfy

Build custom maps with personalised overlays
using various different providers
ColorHunter www.cotorhunter.com

Upload a photo to get an instant colour scheme
defined for you!

Skitch www.skitch.com
A useful screengrab tool that allows you to
annotate grabs with text and marks

Gridless Ihfl ICQQI OtJ V.fl I lh Ub.CQITl/

gridless Ittilerfllate

HTWL5 and C5S3 boilerplate system aimed at a
mobile-first approach

Page Speed Online

de ve looers. aooa I e.com/paa espee d

Get useful hints and taps to increase the page load
speeds on your site

FontStmct foinlstrucf.com

Create your own typefaces using this online editor
and creation tool

HootSuite hoot suite, earn

Monitor and react to your social network feeds
using a single interface

Create interactive typography easily with this
useful JavaScript plug-in

Mobilized mobl ize i 5.CQ m

Make existing sites more mobile orientated with
this framework

stock.schng sxcJm

Free stock photography, some without limitation
- ideal for web designers

Prezi arezi.com

Create and deploy powerpo«nt-style presentations
online with this interactive tool

Stitches draptun ,g ifhuti com /stitahe h

Generate CSS Sprite sheets by uploading your
existing images and copying the output

Cage cafleaafl.cam

Useful online tool for collaborating with other
designers and developers

PDF.isgithub.com/mozilla/pdf.i5

Render PDF files directly as native HTML with this
JavaScript plug-in!

feature

200 ESSENTIAL TOOLS AND TRENDS ►

W3C MARKUP VAUDA1I0N SERVICE

validator w3.org

The W3C’s validator should be part of every developer's
workflow. It’s not going to make your code perfect but
it will help you track down errors and will help you
better understand what kind of HTML is now
considered best practice, and which elements have
been removed from the spec.

TYPEKIT

www.typekit.com

Typekit makes it easy to use a full library of fonts on
the web for the first time. Rather than limiting you to
commonly installed fonts. TypeKit uses a
downloadable format ttiat allows fonts to be
temporarily installed in the browser. This allows font
foundries to license their fonts without the risk of
them being pirated, and opens up a world of
typographic possibilities for web designers.

IMPRESS

www.WQrdpress.com

WordPress is arguably the
definitive blogging platform
on the web. It powers millions
of websites with its highly

extensible platform, and has developed sufficiently

to become a capable general-purpose Content

Management System (CMS), such that it is easily the

most popular CMS currently available. One of the
key elements to the success of WordPress as a
platform has been the license under which it's
distributed - this allows the software to be freely
used and adapted to suit each individual designer or
developer's needs. As well as this generous licence,
the extensible nature of the core system makes it
easy to write plug-ins that work with the core, which
has led to a hugely diverse and active ecosystem of
supporting extensions covering functionality as
disparate as ^Commerce shops to video galleries,

CHROME DEVELOPER TOOLS

d evelopers.q oon le.com/ch rom e-d evel ooer- tools/

docs/overview

Chrome's developer tools add-on comes bundled with
the Chrome browser, and is essentially the Chrome
equivalent to Firefox's Firebug and its developer tools
add-on. You'll be continuously testing sites in Chrome,
so its console, profiling, live CSS editing, DOM and
resource checking tools are invaluable to your

HOTGLOO

www.hotqlQQ.com

HotGloo is an easy-to-use prototyping and
wireframing system that's entirely web based. It
supports collaboration, allowing multiple users to
work together to create interactive projects.
Fully-featured tools allow for master pages as well as
standard Ul elements, and the system makes it
simple to collect feedback for iterative improvements.

TWITTER API

dev-twltter.com

The Twitter API provides easy access to real-time and
limited historical data based on users, hashtagsor pure
search terms. The API can be accessed In a variety of
ways to suit your project requirements, whether you're
grabbing results via JavaScript or a server-side
language, including JSON and XML.

Extend your reach.
Multiply your audience.

FACEBOOK API

d evel one rs facebook. com

Facebook provides an API platform that allows for
integration with the social media platform across
websites, mobile apps and the Facebook website itself.
If includes sut>APls such as OpenGraph and makes it
simple to deploy engaging social experiences into your
app or website without having to create all the
plumbing from scratch.

JEL

f*crh»k SDK 1.0 Tw IQS

feature

»•

>■*

MOOTOOLS

www. mootools.n et

A popular alternative to iQuery, MooTools offers a
framework for achieving common tasks such as
grabbing a DOM node and assigning a CSS class. As
with jQuery. the system is extensible and there is a rich
ecosystem of piug-insand extensions available. While
not as well-known now as jQuery MooToote uses a
similar approach and is still very useful for rapid
JavaScript development.

IflOITtr

mooratifr

ADOBE KULER

kuler.adobe.com

Adobe Kuler is an online colour scheming tool that uses
mathematical equations to provide a range of palettes
based on a core anchor colour. Features include photo
upload to automatically create a complementary colour
scheme, the ability to download swatch files, and store
favourite schemes for later retrieval.

DREAMWEAVER

www. a dob e.com/d rea m weave r

Dreamweaver is the de facto web design tool, and while
historically expensive is now far more accessible as a
result of the Adobe Creative Cloud. The latest version
offers enhanced WebKit-powered live view, live code
and a host of integrated services including syntax
support for jQuery PHR ASP.NET and more.

THE EXPERTS CHOICE

CURES SEES
MD at Square Circle
Media

X-Frecise ls3.envsto.

BmwserStaek wwwtifCM&erstack.cam

Layer Cake YflmmiWtltliLmtrf

ELIZABETH

ROBSON

Author ol Wickedly
Smart

Hype vavivI i irni j f mrn/nvry! \

DietCoda mnirmrri
Adobe Shadow

JEFFREY WAY
Editor at Netfeits*

Prefix r

v,ww.nreftxr.com

L aravel ferave/mm

DAVID MAY
Chief creative at
Wijmo

Theme Roller

kiu&MiLQpm/lhemeEnRei

UXPIN&UXPin notepads

ColorSchemer Touch

MlaicheiTierfflirfeuch infaohp

HAMPTON CATLIN
Inventor of Sass
Link Conditioner

rmttasivn^.

I irbkan

\ Bourbon tf/gt iQtlttiQLWktlQU&Vn
\ Spracker 9. rr /

j snrseker

ERIC MEYER

CSSBepert

BBEdit

Browser/Inspector Combo

various

I Moqups moaups.com

* Online tool for generating advanced
; markups before building a website

I TheResponsinator

\ www.resDQnainatQr.CQm

| VI ew websites i n a host of resol uti ons for
l sma rtphones and tablets

] Mustacbe.is git hu b .com /\ Fin I/m us lache. js

| Less work with these logic-less templates for a host
| of coding languages

I WPtouch Pro

; www.bravenewcpde.com/Droduct/wDtouch-Dro

j WordPress plug-in that instantly adds a mobile
i version qf site

j Fatternizer pgKsmfcf r.WITl

\ An online CSS3 stripe generator tool

| KttidoUIwww.KenclQm.com

| A framework to help build HTML5 apps

| Coffescript coffeescript.Qro
| Lightweight is nguage that com pi les i nto JavsSerlpt

| Codesniffer pear.phD.net/Dackaae/PHP
j CodeSniffer

I This tool checks PHP code to a defined standard

! MoodboardLite

! ityne5.aDBls l QgfTi/y&/flDP/niQQtlt?Qflrd-litfi/

] id3637&6813?rm=S

i iPad app for creating mood and inspiration boards

| codosauriisiLun&j, fc ajj l QL£,Qjj,mi!ya/ajj,p/

j cQdPSfl urn s/id3S25Q Qg3£?mt=S

| FTP Client which allows you to edit your code
| directly on the server

i The popular Mac-based text editor from Panic
j Divw w w w.rn I zaa e. com/d i v v v
| A screen workspace management tool
j Fitvids www.rittfid 5 l 5 .cpm

I A jQuery piug-in for fluid-width embedded videos

j HTML-IpsttmwY/W.html'iPSlimiMni

! Quick and easy Lorem Ipsum placeholder text n
| various HTML contexts

| Sublime Text 2 WWW. 5 Ut?limfite^UQfT 1

! The feature-rich text editor for web app developers

\ Markdown

| darinqtireball.net/proiects/markdowri
: Automatical ly expand marked-up text to ful I HTM L
I using markdown

1 Video.js
i www.videQjs.ccnh

1 Video player with the same API for HTMI.5 and Flash

! AnythingSlider

I yyyy Wrtts-l r i win/gwarn p I gs/TSn y Ih in 1 f

I A multi-purpose content slider jQuery plug-in

I BuySellAds

www.buvsellads.CQm

An ad network that's popular among web designers

Notepads www.noteQad-QJus-Plus.org

The popular and powerful text editor

1 SpritePad

\ Drag-and-drop interface for creating CSS sprites

feature.

200 ESSENTIAL TOOLS AND TRENDS ►

IS Bin i5bin.com

A live-rendered code sharing and testing tool,
recently updated.

IS Hotline java script, poc kettiotli ne.CQtri

A completely free telephone hotline to help struggling
JavaScript developers

Zen Coding

CQde.gQoa I e. com/p/zen-codin a

A plug-in for text editors for high-speed coding.

Gtt a it-scm.com

A free distributed version control system for projects

DocHub rioehub_io/

Instant access to documentation for CSS, HTML,
JavaScript and more

HTML5 - Edition for Weh Developers
developers,whatwfl.org

The HTML5 spec, rewritten specifically for developers

CSS3 Generator cssJaene rate r,corn

A toot that generates code for tonnes of CSS3 features

Animate.css daneden.me/anlmate

A library of ready-Lo-use CSSS animations

MicroismicrQis.com/

Search engine that works for single-purpose
JavaScript frameworks

CSS3 Click Chart c5s3tliMarl,tQfn

Code, links, and examples for loads of C5S3 features

CodePeri todeoen.lo

A code sharing tool with extensive library and I

preprocessor support [

Video SWS prapgn^n^.dfi/htmlfivldfio

A feature comparison of about two dozen HTML5 [

video players i

Skeleton www.aetskeleton.com j

A boilerplate for responsive, mobile-friendly
development of sites

Responsive Images Chart bit.lv/DMiKCv

A chart with feature breakdown for many responsive
image solutions

LABjs iabjs.CQm

Script loader to enhance page performance and
reduce resource blocking

RequireJS reouireis.om

Script and module loader designed to improve speed
and code

jQuery Mobile iauervmobile.com

Touch-optimised web framework

Aiaxload w w w.a ia xJoad. info

A tool for generating Ajax loading animated GIFs

Web Developer Toolbar
w w wxhr isued erick. com/ work/webdeveloper

The popular developer tools for Firefox and Chrome

Parallax.is

sto I h 5d&rf >fl1lh u&.t gm/Para Wms

A JavaScriptframework for creating parallax scrolling

Google Webmaster Tools
w w w.g oogle.com/web masters/too Is

Webmaster tools for optimising websites for search

Lay® Styles www.laverslvles.org

A Photoshop-like layer styles interface that produces
CSS code

;

■

| HTML 5 ★ BlllLEHPUITlH

HTML5 BOILERPLATE

www.htrtil5bQilerplate.CQrn

HTML5 boilerplate provides a basic structural framework into which an HTML5 website or webaop can be deployed,

The system is set up to be compatible with all major browsers, including older versions of Internet Explorer, while still
allowing use of the modem HTML5 tags such as <artide> <aside> and <header>, The system also features mobile
device optimisation, allowing for rapid deployment across different platforms including the modern breed of
smartphones and tablets.

Other useful features include deliberate support for progressive enhancement limited cross-dependencies
(allowing you to remove whole sections of code without worrying about breaking other parts of Lhe system) and it
even provides a boilerplate .htaccess file to set up best-practice gripping and caching on your server

BASECAMP

w w w.baseca mp.cQm

Basecamp is an online project management system that
allows you to collaborate with colleagues, assign tasks
and track progress with ease. The system provides to-do
lists, discussion areas, an asset repository and shared
calendar. Part of a suite of applications offered by
375*gnals including Highrise, Backpack and Campfire,
which together provide a complete suite of
management tools.

More pwpte In more places manege
more projects on the web today with
Baseeamp than any other app.

gf* Last week 14*432 companies kicked
off new projects using Basecemp,
Today (ft your turn.

Find Otft i^Y Of 5|*nvOurnf»t pmjft far

EVERNOTE

www.evernote com

Evernote allows you to create a virtual scrapbook of
webpages, photos, text and audio that you come across
while browsing and access them on any of your devices
including your desktop computers, phone and tablet.
The database allows you to create keywords and tags to
quickly categorise and search for items in your
notebook, and even uses OCR to digitise text in photos
and images.

DROPBOX

w w w-d ropbQx.com

Dropbox is a free service that allows you to store files on
the web (in the cloud) and automatically synchronise
them between your different computers and devices. It
works on Android, iPhone and iPad, as well as your
desktop computer, and supports collaboration through
sharing of folders with your contacts.

WETRANSFEF

w ww.wetransfer.com

WeTransfer is one of a host of free services that allow
you to easily send a file that's too big for regular email
What makes this particular service stand ouL is the
excellent 2G6 file limit, and the ability to send multiple
files simultaneously without having to register for an
account, making it an ideal way to get your larger files
around the web.

HECAPTCHA

www.recaptcha.net

reCaptcha is a free service that helps prevent spam by
presenting a pair of words scanned from books,
newspapers and radio show scripts that are being
digitised. The system works by matching known words
with unknown words, allowing users to prove they're not
spam bots, and the Google-sponsored digitising project
to get free translation at the same time.

52 .

feature

HB Cikf Pt£F malvi truildinq mb
R (iffipM. Ml(l Ain)

I (l^WflfBCOdf

Why w* Cu*PUP

CAKEPHP

www.cakephp.Qrg

Prototype PHP-based web applications rapidly using
boilerplate code and scaffolding. CakePHP is MIT
licenced, and comes with a lot of the common plumbing
already taken care of including authentication, database
access, caching and security. CakePHP has a loyal
following so support is good too.

Bill* API

dev.bitlvxQm

The bit.lv API allows to you programmatically create
shortened links in the same way that twitter does when
you paste a link into its website. You can also track and
monitor usage with some analytics support. It's a pretty
simple service, but incredibly useful in the modern era
of character-limited social media communication.

ADOBE AIR

www.adQbe.CQim/air

Adobe AIR allows you to deploy native applications
across different operating systems while using standard
web development tools such as HTML. CSS, JavaScript
and Plash. Apps can be compiled into the AIR format,
which is then installed directly to the host operating
system via the web, making it ideal for developing
desktop widgets.

JQUERY

^ jUU6/r jqusry.com

*** jQuery arrived at the
same time as the explosion in front-end client-side
rich user interface development, and helped to
herald the arrival of HTML5 into everyday
conversation as a result of its ubiquity. Before
jQuery creating cross-browser user interactions
was tricky to adiieve and often extremely
time-consuming. jQuery solved this by abstracting
the browser differences through a series of
common methods, allowing developers and
designers to spend time worrying about how to
provide the best user experience rather than
worrying about the nuts and bolts of supporting
different DOM models and JavaScript engines. It
also brought the idea of chaining commands
together to the masses, making for dramatically
more succinct code!

Today. jQuery con be found on more websites
than any other JavaScript library, and it has an
almost unlimited number of tutorials, plug-ins and
extensions available to further enhance the core
functionality.

EXPERT QUICK-PICKS

Mobile Design Pattern Gallery

ONDREJ SKACEL

Interactive developer, Str iker Digital
PSPadwww.csoad.com

Lightweight-but-powerful text editor with handy
features including FTP client, code highlighting. Lorem
Ipsum generator, predefined HTML and much more.

Window Resizer

hchrQme.qQQqle.CQiTi/webatQre/detail/

If kplliraakff an hi nideamm mi I r gpf onf h?

utm source-chrome-iito-icon

Window Resizer is a Google Chrome plug-in that
allows you to comfortably test your website In various
predefined or your custom resolutions.

gsap yyyy w.flresn 12

Greensock brings the ease of animation from Flash to
HTML. Animating DOM has never been easier.

THORD DANIEL HEDENGREN
Author, designer and speaker

iPad apple.com/iipad

The iPad is great for doing wireframes, especially
when you complement if with a nice stylus,

Basecamp ba5ecamp.com

Basecamp is a great way to organise yourself. The
service will save you time and energy.

GitHub aithub.com

GitHub is Git for the rest of us; great for managing
your code and inviting others to collaborate.

TOM! TONTTI

UX Lead at White Sheep Isobar, Finland
Live View for iPhone & iPad

w w w.za mbetti-com/p roiects/li ve vie w

Brilliant, yet simple remote screen viewing app, See
your design on a device while you're still designing it.

A reference to mobile app design patterns, illustrated by
hundreds of screenshots.

pencil en.wlKlaedifl.QrQ/wiKi/Fencll

Perfect tool for making quick real-size mobile interface
sketches and paper prototypes.

ZEH FERNANDO

Senior Developer al firstborn

Charles www.charlesprQxv.CQm

A very handy tool to inspect and manipulate the date
gets transferred around your computer and a server,

Chrome browser

w w WiQQgq If ■ wm/l nll/sn/ch rcm s/brsm sf r

Chrome's inspection and debugging tools for HTML.
CSS and JavaScript are nothing short of revolutionary,
j GooeleDrivedrive.aoociJe.com

Great for making notes and sharing between the team.
Sometimes considered the poor man's Project
Management suite, but one that is very flexible when
used well,

GROUP94

Belgian design agency
J5DN kon oro

JSQN [JavaScript Object Notation) is a lightweight
date-interchange format. It is easy for humans to read
and write, it is easy for machines to parse and generate.

Screen Ruler www.micrQfox.com

The best solution to check if things are positioned
pixel-perfect! We're using it since day one at group94.
Lorempixel lQremuixel.com

Lorem pixel provides dummy images width the
dimensions of your choice.

MAGNUS DAHLSTRAND
Clipmemi ww yy, 1 1 j pm CIJ Hi C9fP
BetterSnapTool
itu ne5.apple.com/us/app/

hietLeranacLflfll
iTemi2 www.iterm2.com

| Wires a uirktools. com/wires

\ Aviary Image Editor

i a<]Yarn:&d l flYlflrY.CQm/lQOI&/

| imaae-editar

= SCOTT STAAB

\ Evemote www.evernote.com

MARCEL KORNBLUM j Google Image tools ww w.aooa I e.

CharlescharlesDroxv.com j

Liveview zambetti.com/Droiect5/ j WhatTheFont

livevi&w \ www.mvfonts.com/WhatTheFont

OmmGraffie www.QmniQrOUP. j

QQm/prQducts/QmnifirflrflQ ; jakuesodomka

\ Capture screenshot

PETE SIMMONS
Firebug -ant firebug com

Dreamweaver CSG

adobe.com/prQduct5/

dreamweaver

S thr9mg.qwq,taQffm/YYEtal9re

| Dronlr clropJj.com,/hello
j Fontcase

j www.bohemiancodina.com/

j fon tease

j LUBOSBURACIMSKY

ROBERT STAIEKER
Screen fly guirktools.com/
screen flv

j Bootstraps twitter.qithub.com/

i Chrome Sniffer

Ehrems.mqlg.wm/fffbstBrE/

detail

TexturePackerGUI

www.codeandwetJ.cQm/

tfi,a.lut£QacLaf

KIERON HOWARD
SymfonyZ www.svnifonv.com

MATT GIFFORD
coidF usionio ca[dluflJan,Qflin
Brackets brackets, io
PhoneGap Build API build.
phQneqap.com/dpcs/api

feature

Create an
interactive 3D
interface
using WebGL

WebGL is hardware accelerated, native 3D
graphics for web browsers, and here we
harness its power to create a 3D interface

tools I Uh; 1 i I trends Dreamweaver A WebGL enabled browser
export Mark Shufflebottom

ebGL has been around for a little while now,
and the threejs library is really coming of
age with each new release. WebGL on the
whole is incredibly complicated, with
mounds of code needed just to get a
:::::::: polygon to display. The threp library

abstracts all of that and gives you access to
simple JavaScript commands that allow you
as a web designer or developer to create
stunning 3D scenes in the browser, The
ibrary now fully supports the COLL ADA model formaL
which is an XM Phased model, so is easy far browsers to
read. This format also supports animation so feel free to
incorporate fully animated content from your 3D
application in your browser.

In this tutorial we are going to import a model in the
COLLADA format and add interactivity to models
contained within the overall COLLADA scene. We will
attach mouse events to these models, which will give us
effectively a 3D interface far a website or application. At
present WebGL is supported by all the major browsers
except Internet Explorer, which has no plans to support it
because WebGL is based on OpenGL (the open graphics
ibrary] and Microsoft tee DirectX instead. However, there
are plug-ins available that will render WebGL. Please note
that some browsers can only load models if they're
accessed via a web server.

WebGL on the whole is incredibly
complicated, with mounds of code needed
just to get a polygon to display

n Getting started

^ f It's probably a good idea to start by
downloading tnree js from GitHub f qlthub-comj
mrdoob/three.is) . Have a look through the projects to
get an idea about WebGL. Now copy the start folder to
the desktop and open index.html in Dreamweaver.
There is some CSS already in there so add this code to
the head section.

001 <meta name= J, vievjport ,J
ct>ntent- J 'width=device-width, user-sealable=no t
mini nun-sea le=1.0, maximum-s cale=1.0">

002 <link href='http://fonts.gopgleapis.com/
css?f amily=Merriweather:700' rel= 'stylesheet'
type=’text/css">

. Body content

We're going to add some text to the project, so
paste the code shown below into the body section of
the page. Tins adds a heading and a box that will only
be shown when we roll over various models in the 3D
WebGL scene with the cursor. Change the text here, to
have some real content

001 <div id= J 'header ,J xhl>Oiscovery Centre</
hlx/div>

002 <div c las s= JI info"

id= "mountsin'"xh?>McHintain Va 1 ley^/h 2>

003 <p>Ygur text here, </pX/div>

A Copy the info

Copy the entire div with the class info and paste
it after itself twice. Change the id of the first copy to
'lake' and the second to 'forest' These are the two
content sections which are hidden to start with, but
when the user roils over points in the scene, this
content will be made visible.

001 <div elass^'info" id= J, forest <t xh2>Forest
Trails</h2>

002 <p>Your text here.</px/div>

Link to libraries

keeping inside the body tag add the following
lines, which link to the JavaScript libraries that we use.
The first is the main thieej s library, while the second is a
library for loading COLLADA models (an XML 3D model
file). The detector code is used to see if the user has
WebGL, while the remaining two are extensions to odd
events to 3D objects.

001 escript sre= M j s/Three. js H x/scrlpt>

002 <script src=” js/ColladaLoader. js"x/
script>

003 <script src="js/Detector. j$"x/script>
004 <script src =1 j$/three*.domevent.j$ J ></
5cript>

005 <script src='js/threex.domevent , object3d .
]5'x/script>

tutorials.

<tuU>rials>

Create an interactive 3D interface using WebGL |

Detecting WebGL

Using newer technology like WebGL requires
you to ensure that the user knows if there is a problem.
White most web browsers support WebGL. IE has no
intention of doing so. There are plug-ins available for iE
though. Add this code to detect WebGL.

001 <script>

002 if ( 1 Detector.webgl ) Detector.
addGetWebGLMessageQ;

Adding variables

This is perhaps not one of the most exciting
parts of our code, but these variables hold many
important features that make our WebGL application
work. Scene, camera and renderer are the basics
required to get a WebGL scene Obviously we then
need content to make the scene actually work.

001 var scene t camera, Tenderer, model,
ground, rot;

002 var rotate=true, over=false;

003 var loader = new THREE.ColladaLoaderQ;

004 var mnt T inbox, lk, lbox, fr, fbox;

Loadthescene

The next block of code that we add toads the 3D
COLL ADA model into our scene. The scene is stored in

our model variable that we’ll use later on. The scene is
scaled down, and then two functions are called. First we
call the init function, to initialise our scene, and then
after LhaL we call the animate function - this will make it
move for us.

001 loader.loadt 'scene.dae', function (
collada ) {

002 model = collada.scene;

003 model.scale .k = model.scale.y -
model,scale,z = 0,125;

004 initQ;

005 animateQ;

006 }

Qg Initializing the scene

To start our project we will create the I nit
function, The first line creates a new div, which is then
placed into the body. This will later be used to render
our scene. The next line sets up a new scene that will
hold everything we need to add. such as lights, models
and a camera.

001 function initQ {

002 var container = document,createElement(
'div' );

003 document,body,appendChiId( container );

004 scene = new THREE,Scene();

requestAnimationFrame {

You will notice that
requestAnimationFrame is used
in the code, this is a browser j
vendor API to save developers
from using timer loops. Instead -
the browser handles the loop
for us, pretty handy!

09 Creating the camera

The camera is a virtual way of controlling what
we actually look at, It takes three arguments, the field
of view, the aspect ratto and how near and far it can
see. Here we position the camera and tell it which
direction to look, which as you can see is almost the
centre of the scene.

001 camera = new THREE,PerspectiveCameraC 40,
window,innerWidth / window, innerHeight, 9,01,
10&0 );

002 camera.position,set( -45, 12 f 15 );

003 camera.lookAtC new THREE.Vector3( -1, 2,

4 } );

004 scene.add( camera );

Adding interactivity

We add interactivity to the models by using a
plug-in from www.learninqthreel5.com. The first line of

tutorials

| ("reate an interactive 3D interface using WebGL

Discovery Centre

*Tnp left, clockwise;*

* The scenery in the
model Is located and
made la spin. When the
mouse rolls over this* it
slows dawn so the user
can select an
Informaflcrtn point

* Information points are
the bright pink cubes in
the scene Ihat are given
mouseoverand
mouseout events

* When the mouse
moves over the
information points Ibey
trigger the event, which
turns on the appropriate
content area, creating

a rollover information
point on screen
-When the mouse is
over the forest
information point, the
appropriate text
appears In a box,
positioned on the
r«ght hand side

code enables me camera to look at which model is
under the mouse, The next line gets the ground plane
from the COLL ADA model. We can then add mouse
events for when the mouse is over or has left leading
us to turn on and off the rotate variable causing the
scene to rotate or not.

001 THREE*Object3D,_th re-ex DomEvent,
camera(camera);

002 ground = model.getChildByName( 'ID276 f r
true );

003 g round.on('mouseout', functionQ{
rotate=true;

004 });

005 ground * on ('mouseover', function Q{

006 rofate=false;

007 });

Mountain point

The first line of the code grabs the mountain
information point from the COL LADA model and stores
it in the variable mnt. The mountain text in the div tag
wiLh the id mountain is stored in the variable mbox.
When the user moves the mouse out from the model it
sets the mbox to be invisible.

001 mnt - model-getChildByWame( r ID43\ true };
002 mbox = document ,ge til ementBy Id(" mountain' 1 ) ;
003 mnt. on (■'mouseout', function ()(

004 mbox.style.visibility - "hidden'';

005 over=false;

006 }>;

Mouseover mountain

When the user rolls their mouse over the
mountain information point, the relevant text becomes
visible in the mountain div tag. In this way we create
content that becomes visible when we rollover parts of
the 3D model, and it disappears when the mouse
moves out. The variable over is set to true to stop the
whole model rotating.

001 mnt.on('mouseover 1 ', function()(

002 mbox.style.visibility - "visible";

003 over=true;

004 });

, More interactivity

Similar to what we did in step 11, we store the
lake information point model in the variable Ik and the
div tag named lake in I box. When the cursor moves out

Adding content
to threejs Scenes

In earlier iterations of the
three.is framework, you had
to use scene.addCamera to
add specific features. Now,
however, there is a global
scene.add that you can add
all models, lights and
cameras.

from the lake information point we turn the visibility of
the lake div tag off so it can! be seen in the display.

001 lk = model.getChildByName( J ID25'„ true );
002 Ibox = document.getElementByldC"lake");
003 lk,on('mouseout', function(){

004 lbox.style.visibility - "hidden”;

005 over=false;

006 });

Going over the lake

When the user moves the mouse over the lake
information point, we again use this to turn on the
visibility of the lake div tag so that the content
connected with it becomes visible on the screen. As

tutorials

Create an interactive 3D interface using WebGL |

Accessing the
model names in
the COLL AD A file

In the tutorial we access the COLL ADA
model and get access to specific
Internal models to give us the rollover
points. You will have noticed that
these internal models have unhelpful
names such as 1D2S. You may well
wonder how we know that this is the
name of the specific model or
whether we named our model by such
a peculiar name by choice? The
answer is wrapped up in the software
that was used to create the model. We
used Cinema 4D. which allows each
model to be named, however these
names seem to disappear when we
export to the COLLAD A model format-
With this format being an XML-hased
structure, we opened the model in a
text editor and did a search for
lakePoint, which has a nodelD value of
ID25,so we use this to get access toil.

you can see this is very similar to creating mouse
events in the regular DOM.

001 lk.on('mouseover J r function(}{

002 lbox, style .visibility = ''visible 1 ';

003 over-true;

004 });

Accessing the last model

You have probably got the hang of this by now,
and so in this code we ogam access the model for the
forest information point this time end store it in the fr
variable. We store the associated div in the fbox variable.
Using those variables we turn the visibility of the text off
when we roll the mouse out of the model.

001 fr = model.getChildByWame( 'ID34' r true );
002 fbox = document.getElementById("forest");
003 fr r on('mouseout', function{){

004 fbox, Style .visibility = ''bidden' 1 ;

005 over-false;

006 });

Final rollover

Finally we add the rollover for the forest
information point. As done previously, we check if the
mouse is over the model and turn on the visibility of the
text so that the right information is displayed as we role
over tiie model. This concludes the interactive features
of the site.

001 fr.on('mouseover' f function!)!

002 fbox,style.visibility - "visible"';

003 over=true;

004 });

Lighting up the scene

Our next section of code actually adds the
COLL ADA model into the scene so that it can be
displayed. We then create an ambient light that has a
dark grey colour and full luminosity, which is the 1 in the
brackets. This light is also added to our scene. We do
not have to position this as it just gives ambient light to
the whole scene.

001 scene,add( model );

002 var ambient= new THREE. AmbientLight(
0x333333 h l );

003 scene,add( ambient );

Add a spotlight

Now the code sets up a spotlight this can be
placed in a position and targeted to light specifically.
This is given a warm, almost white colour and is set to
be stronger than 1. The light is set to the same position
as the camera and is pointing towards the centre of the
scene. Finally this light Is added to the scene-

00 1 var light = new THREE,Spotlight( GkFFDDDD,

i-2 );

002 light.position = camera.position;

003 light,target.position.set( 8, 0, & };

004 scene,add( light );

Rendering the scene

To make the scene visible we need to have a
Tenderer to actually draw the scene. Notice how the
Tenderer sets the anti-aliasing of the objects to true to
give softer edges to the models. The render size is set
to the inside dine ns ons of the browser wndow. The
tenderer is added to the container we added in step S.

001 Tenderer = new THREE,WebGLRenderer( {
antialias; true } );

002 Tenderer,setSize{ window.innerWidth f
window,innerHeight );

003 container,appendChiId( Tenderer,
domElement };

004 }

Create the animation

The animate function contains the code that
moves models on the screen. The i statement checks

that the user hasn't got the mouse over the model and
not over one of the information points, it then rotates
the scene. Otherwise it slows the rotations down so it's
easy to hold the mouse over the information points.

001 function animate!) {

002 if(rotate=true &S over==fal5e){

003 rot=0,00S;

004 } else if (rotate==false II over-true)!

005 rot-rot*0.95;

006 }

Update the display

The final code here updates the model position
with the value of the rot variable, The Tenderer is told to
render the scene using the camera. The animate
function is set to be called at 60 frames per second
using the requesLArlmationFrame function. The
function and the code block is closed.

001 mode1.rotation.y+=rot;

002 Tenderer,render( scene, camera );

003 requestAnimationFrame! animate );

004 }

005 </script>

Test the project

We have now finished all the code for the
project, so save the file and test it in your browser. The
main scene will rotate; if you move the cursor over the
scene it will stop rotating by slowing down gradually. If
you move your cursor over one of the pink information
points, you will get the appropriate information appear
in a box.

tutorials 57

| Serving images to high-resolution screens

Serving
images to high-
resolution
screens

As high-resolution screens become
more and more commonplace, we
need ways to display graphics that take
advantage of their capability

tools I tech I trends C 5 S 3 , HTML 5 , JS
expert Ben Fra in

he latest iPad has a 2,048 x 1,536
pixel resolution at 264 pixels-per-
inch (PPI) screen, the iPhone 4 and
i Phone 4S have greater pixel
density: 960 x 640 pixel resolution
at 326 ppi. It isn't just Apple's devices
that can be considered high-
resolufcn, even if they donl boast
marketing tenms like Retina display.
The HTC One X uses a 4.7-'inch
display, with 312 PPI for example; and
even Sony's latest handheld gaming device, the PlayStation
Vita, has a 220 PPI screen, We now have Apple's Retina
display MacBook Pros too, at 220 PPI, It's easy to see where
this is going pretty soon high-resolution/PPI displays will be
the norm on all devices that access the web. The pickle at
present c that while text looks beautiful on these devices,
web images usually donl As high-resolution devices often
have two dots per CSS pixel, the reset is that images end
up looking blurry.

Thankfully, there are a number of things we can do to
address this issue. Let's take a look at how CSS3 media
queries and icon fonts can ease our pain, and then deal
with the obvious elephant in the room; delivering alternate
tmages in markup.

Oi CSS minimum-resolution

CSS3 media queries can be used to target
high-resolution/PPI screens; we can use them to serve
different background images depending upon the pixel
density of the device. Gy now you are no doubt familiar
with the media query syntax. Let's suppose we want to
show two images, one for standard screens and one for
high-PPl devices. We can go ahead and use the old
min-resoiution property:

001 ■airedia (min-resolution; 96dpi) (

002 /* rules here would apply to a normal

screens */

003 }

004 @media (min-resolution: 192dpi) {

005 /* rules here would only apply to high-
resolution screens */

006}

32 About those iDevices

Sadly WebKit (JOS, Android, Safari, Chrome and
others) hasn't implemented min-resolution, and so we
need to use WebKit's own property. St uses a simpler
system where the value represents the pixel density of
the device. A 'normal' screen will have a pixel ratio of
one. An iPhone 4 or similar, on the other hand, could be
targeted like this:

001 @media (-webkit-min-device-pixel-ratio: 2)

002 {

003 /* Webkit high-resolution specific rules

here */

004 }

03 Other WebKit devices

While the WebKit prefixed rule also targets
Android devices, many Android handsets (although still
enjoying high-resolution screens), don't have quite the
same pixel density as something like an iPhone 4,4S or
new iPad - and none have anything near Retina display.
Therefore, you may want to lower the threshold to
include more devices,

001 &nedia (-webfcit-nin-device-pixel-ratio:

1.5) C

002 /* lcwer threshold rules here */ v

003 }

Mozilla is different

Another vendor, another expression! Mozilla uses
a comparatively odd syntax, if you wanL to target
high-resolution/PPI devices that might be using a Mozilla
based browser such as Finefox, pay special attention as
the minimum part of the expression is written first
followed by a double-hyphen:

001 (Shiedia (min—moz-device-pixel-ratio: 2 ) {
002 /* Mozilla rules here */

003 }

05 Opera syntax

Unbelievably, Opera uses a different syntax again,
While similar In syntax to WebKifs version (albeit with an
-o- prefix as opposed to -webkit-l Opera has opted for a
ratio representation of the pixel density, For example
instead of writing 2 as the value (as you would with
WebKit), it must be presented as 2/l.

001 @media {-G-min-device-pixel”ratio: 2/1) {
002 /* Opera rules here */

003 }

06 The W 3 C way?

* ~ Owing to the prevalence of the -webkit- prefixed
version of this media query, you may be forgiven for
assuming that the W3C would follow suit, declaring an
un prefixed version of that syntax as the global web
standard. However, as minimum-resolution already
existed, they have not done this and have instead ooted
to add a new unit of measure, dots per pixel, written as
dpptx in CSS. Below is what the syntax is likely to be
styled as in the future.

001 @media (min-resolution: 2dppx) {
002 /* rules here will apply to high
resolution media in the future */

003 {

07 Full vendor stack

Let's go nght ahead and put all these previous
vendor versions together with the likely W3C
implementation (dppx), into one media expression that
we can use to bulletproof this technique whenever we
implement it. The user-agent (whichever browser you are
using) will happily ignore any expressions that don't apply
and render the one most relevant, ensuring cross¬
browser functionality-

001 @media (miirresolution: 192cfci) r {-webkit-
min-device-pixel-ratio: 2), (min—moz-device-
pixel-ratio: 2), (-o-min-device-pixel-ratio:

tutorials

Serving images to high-resolution screens |

r#f(rrltn (tr'nhuHfin Vrtrrt*

Tvprlqi llifh ImilbtlM h»

®uo@o

<Lalt>

<L(!ft>

♦ Include more
devices by
altering the
pixel density

♦ Ifyoudontset
an appropriate
background size
value, a

value, Many
high-resol Litton

wl() 0

high-resolution
image could

screens could
benefit

Ui*f tkiiudiU

overflow Its
container

<De]ow left*

hbkhh

< Below left*

* WebKit doesn't

♦ With

respect the

: %

background ■'Size

ml n-resolutlon

set to contain, the

property, so it's

background

not possible to

(IBj

Image will scale

rely on it for

correctly

Safarlor

-regardless of the

Chrome

lUOAl ' “ *** “ f**

Image she

2/1) r (min-d^vice-pixel^ratio: 2 ), (min-
resolution; 2dppx) {

@02 /* High Resolution styles go here */

003 )

qj A use case

Let's su ppose we wanted two versions of a site
logo, one for hig ^resolution screens and another for
everything! else. Using our full vendor stack from the
previous step to achieve parity across browsers, here is
an example of how we could set one image for normal
screens and another for high pixel-density displays:

@01 . logo {

00 2 bac kg round-image: urlimg/logo.

png r );

003 }

004 Omdia (min-resolution: 192dpi),. (-webkit-
min-device-pixel-ratio: 2), (min—moz-device-
pixel-ratio: 2), (-o-rnin-dev ice-pixel-ratio:
2/1), (iriin-device-pixel-ratio; 2), (min-
resolution: 2dppx) {

005 ,lcgo {

00-6 background-image: url( r logG@2K,png');

007 >

008 3

09 Making it fit

::: ~ r Wh He that wl ll display the correct image, if we set
a hign-resclution background image as our logo, and the
lego div it sits in is smaller in pixel size than the image,
ordinarily it will overflow the container. Thankfully, there is
a C5&3 property that can solve our issues. We can use

the background-are property with a px value or contain
value to make it fit:

001 (^nedia (min-resolution: 192dpi), (-webkit-
min-device-pixel-ratio: 2) h (min—moz-device-
pixel-ratior 2) f (-o-min-device-pixel-ratio:
2/1), (min-device-pixel-ratio: 2) r (nin-
resolution: 2dppx) {

002 r logo {

003 background-image: url('logo@2x.png');

004 background-size: contain;

005 }

006 )

10 Background-size options

The background-size property can also take
numerical values, Using pixels for size can be useful if
you want your images to stay a set size within a fluid
container. The width is given first, then height. If no
height is given, auto is assumed for the height A
percentage can also be used and this will render the
image as a percentage relative to the container.

001 .background-size-dimensions {

002 background-size: 39@px 30@px;

003 3

11 Naming conventions

You'll notice in step 3 tfiat the high-resolution
logo file name «s the same as the standard resolution
targeted one except it has been suffixed with @2x'
before the file extension. This is a naming convention
used lay Apple when targeting their Retina displays. It's

actually not necessary, but many pre-existing JavaScript
solutions use this convention- so it may be something
that is worth adopting.

001 standard {

002 background-image: url('image,png J );

003 3

004 r high-resolution {

005 background-image: url {‘imaged, png');
006 }

Icon fonts

If you want to provide scalable icons for a design,
there is a better option than images: icon fonts. There are
a growing number of icon fonts available, and they can
be included in a design using the ©font-face rule. You'll
need a version of your icon font in WOFF, SVG, EOT and
TrueType to cover all browsers. Then use the ©font-face
rule to include it.

001 @font-face {

002 font-family: *hr J ;

003 sre: url( l fonts/hr,eot') ;

004 sre: url( 1 fonts/hr, eot?#iefi.x*)

13 Setting up defaults

In this example we are using fonts from icoMoon
(which can be found here keyamoon.com/
loomoon/#toHom&l which are mapped to characters.
Therefore, we can add them by adding a particular class
to the icons needed in the markup. First of ail, well define
styles that will be particular to all the cons. This will cover
us wherever the classes are ordered among others.

tutorials

| Serving images to high-resolution screens

* pjclurelllLis. bv Scott Jehl provides the ability to
s-wap out alternate images defined in markup

• SVG Images scale well, much like lean fonts, and are
a good choice where browser support Is acceptable

001 [class'^icon-"];before, [class*-" icon-
”]:before {

002 font-family; *hr ? ;

003 font-style: normal;

Adding with class

* We can now add the relevant icon wherever we
want by adding the relevant class, The icon is inserted
before the element it is added to. If you want the icon to
appear afterwards simply amend the pseudo selector
from before to after.

001 . icon-chrome:before f
002 content: “\21";

003 }

004 , icon-firefox: before {
005 content; "\22 ,F ;

007 .icon-opera;before {
008 content: “\23";

@09}

010 .icon-globe:before {
011 content; “\ 24 ";

012 >

013 .icon-check-alt;before

{

014 content: “N25";

015 }

15 Adding icons inline

Adding the icons inline without a pseudo selector
is not a good idea semantically, as the content is
meaningless. If you wish to, remember to use character
entities for each number. Otherwise the number will
appear as is, Here, we are adding all the icons in a row,

001 /* CSS */

002 .icon-insert {

003 font-family: ‘hr';

004 font-style: normal;

005 speak; none;

006 font-size: 5 em;

007 }

008 c!-HTML —>

009 <p cla$s=”icon-
insert">8#x21; E#x22; &#x23;
&#x24; &#x.25;</p>

16 Inserting as data attribute

You can also use data attributes to insert icon
fonts. This lets you keep the icons out of the actual page

content itself, Remember that any attribute beginning
'data-' in HTML5 is perfectly valid code, so it isn't going to
sour the markup for validators. Insert the icons in the
markup in the same way as the previous step: using
character entities.

001 /* C$5 */

002 [data-icon]:before

{

003 font-family: ‘hr';

004 content: attr(data-
lcon);

005 speak; none;

006 font-size: 5em;

007 }

17 Font flexibility

By using fonts, the icons will scale to any
resolution and can have colour, text-shadows and even

experimental '-webkit-mask-image' values (for WebKit
browsers! added. What's more, compared with images,
the file size is tiny. For the five icons used here, the largest
font that would be served is just eight KB (before gap!

001 [class*=”icon-”]:before, [class*=”

icon-”]:before {

002 font-family: ‘hr';

003 font-style: normal;

004 speak: none;

005 font-size: 5em;

006 color: green;

007 -webkit-mask-image:

-webkit-linear-gradient(white
f rgba(0,0,0,0.7>);

008 text-shadow ;0 -Ipx
black;

009 }

18 Using Picturefill

There is no proper way to add alternate
high-resolution images such as photos an markup yet.
One solution is to use Picturefill. a JavaScript solution that
follows a markup pattern similar to the HTML5 <video>
tag, After adding the Picturefill JS file within the markup,
alternate images can be specified using media query
style expressions. Note the slightly different syntax
present for the media query.

001 <div data-picture data-alt=”An
image, whose source changes depending
upon the media query style expressions^
002 <div data-src=”normal. jpg' r x/div>

003 <cfiv data-src= H high- re solution,
jpg” data-media=”(min-resolution:

192dpi ) t (-webkit-inir-device-pixel-
ratio: 2),(min—moz-device-pixel-
ratio: 2),(-g-min-device-pixel-ratio;

2/1) r (rnin-device-pixel-ratio; 2), (min—
resolution: 2dppx)”x/div>

004 <3— Fallback content for non-JS

tutorials

Serving images to high-resolution screens |

browsers. Same img src as the initial,
unqualified source element, —>

005 <noscriptximg src- ,f norma 1. jpg fr
alt="An image, whose source changes
depending upon the media query style
expressions”></noscript>

006 </div>

* A great tool for delivering images on a responsive
website can also be used to deliver h*gi>resolL!tion
images where needed. Head over to adaptive-images,
com and after installing (you are going to need access to
your server's .htaccess file), alter toe standard line of
JavaScript used, to:

001 <script>document.
cookie='resolution^’+Math.max(screen.
width,screen,height)+(“devicePixelRatio”
in window ? **, "tdevicePixelRatio :

",l p ') + f ; path=/' ;</script>

Uploading high-resolution files

'*■ * When using Adaptive images for high’resolution
»mages, you'll probably want to limit which images are
processed by it. You can limit this by altering toe.
htaccess file. For example, if we didn't want Adaptive
Images to resize images inside a folder called no-thanks
(folder addresses are root relative) we could add a line
that looks like this

001 RewriteCond %{REQUEST_URI} I no-thanks

2i Fit and forget

One great thing about Adaptive Images is it works
by re-using existing images where possible for
high-resolution screens. For example, if viewing on an
iPhone 4 in portrait, Adaptive images will multiply the
CSS pixel-width of toe device (320px) by the pixel density
reported (2) and use that value (640 px) to check and use
an image matching tfiat size where possible.

22 SVG files?

If you have vector images, another option is to
consider exporting them SVG(Z) files. Like icon fonts, SVG
images (whether background or inline) will scale well
regardless of screen size and pixel density. Browser
support is generally good (IE9+) and file size is typically
far tower than a PNG/JFG equivalent,

001 ,svg .logo {

002 background-image: urlC'lago.svg’) ;
003 }

Code library

All you need to use icon fonts

You can use icon fonts in a number of ways. They can be inserted
with data attributes, class names or directly in the markup

001 $font-face {

002 font-family: 'hr 1 ;

003 src: url(*fonts/hr.eot')j

004 src: url(‘fonts/hr,eot?#ief lx r ) fomatCenbedded-
opentype r ),

005 url('fGnts/hr.5vgJ^'hr , ) format{' svg f ) „

006 url('fonts/hr.woff r ) format ('raff')„

007 url(*fonts/hr.ttf*) format(‘truefype*);

008 font-weight; normal;

009 font-style: normal;

010 }

First include the Icon font
using the @font-face
declaration, with
different font files for
different browsers.

Use the CSS attribute
selectorifyou want to
add Icons with data-icon
attributes. Adjust the size
to suit

To addicons with classes,
set the defaults using
CSSS substring matching
attribute selectors and
use the content property
to add the Indlv idual
Icons for each class,

001 [data-icon]-before {

002 font-family: 'hr J ;

003 content: attr(data-icon);
004 speak; none:

005 font-size: 5em;

006 }

001 [class*=”icon-"]:before, [class*-" icon-"]:before {
002 font-family: 'hr- 1 ;

003 font-style; normal;

004 speak; none;

005 font-size: 5em;

006 color; #fff;

007 -webkit-mask-image: -webkit-linear-gradlent(white,rg
ba(0 f 0 f 0,0,7));

008 text-shadow:0 -lpx black;

009 }

010 , icon-chrome:before {

011 content:

012 }

tutorials

I Tabbed boxes with multiple loops for WordPress themes

Create tabbed
boxes with
multiple loops
for WordPress
themes

This tutorial will teach you how to add a
tabbed box with content from several
categories to your WordPress theme

tools I fecit I trends WordPress, RHP. HTML, CSS and jQuery
expert Thord Daniel Hedengren

ometimes you want to offer your
visitors even more options to dive into
your site than just a list of posts and
whatever headline solution you might
have employed for your front page. This
" tu torial aims to teach you about one of

the options at your disposal, namely the
tabbed box. Well create three different
loops and let the user switch between
them using tabs. The same multiple loop
technique could obviously be employed with sliders or
whatever solution that suits your fancy. As for the
tabbed box, well rely on jQuery since it already ships
with WordPress and is a popular and well known
JavaScript library these days.

Before we get to the actual tutorial though. I'd like to
talk a little bit about tabbed boxes (and content sliders
for that matter). You see. it is important to use these the
right way, because if you don't, you're not only adding a
feature users will ignore, you're adding clutter and site
weight overhead as well. Tabbed boxes that don’t fill a
specific need, sporting supporting content or additional
ways into the site that the visitor will actually want to
use. just shouldn't be there. There's also the mobile
aspect to take into account, so make sure your tabbed
box works well in mobile browsers should you choose
to include it there as well.

Use tabbed boxes and sliders with caution: make
sure you think them through, and you'll be just fine.
Less is more, you know.

01 Decide what you’re doing

Before we attorn pt to do anyth ing at al I, we need
to figure out exactly what it is we're doing. We'll create
three separate loops that list content from three different
parts of the site. For this we are going to use categories
and tags, so this is where you decide which categories
to use. For the purposes of this tutorial, we will be using
the categories Superstar and Movies, as well as the tags
Duck and RabbiL

02 Where to put the box

You obviously need to d ecide whe re you r box
should be. For this tutorial. I have created a child theme
for the Twenty Eleven theme, and copied the •ndex.ohp
file to the child theme so i can make edits without
having to worry about the theme breaking when it is
updated by the author. You can do it any way you want;
the files are available with this issue.

If you want to learn more about child and parent
themes, read up on them in the WordPress Codex
(codex worduress.org/ChiId Thernes) or alternatively
you can check out my book. Smashing WordPress
Beyond the Blog. 3rd Edition.

But really, where did you put
us the box?

We want the box to be just above the content, so plan
to add it under divicontent In index.ohp, Look out for
the following code in index, php. just below the get_
headerO part.

001 <div id-'primary"^

002 <div id= "content'' role= J, main">

003

004 <!-- THIS 1$ WHERE THE TABBED BOX WILL

BE — >

C4 Creating a new loop

Let's start by creating a new loop. We'll use
WPjQuery to do the. and then well reset it so it won’t
interfere with other loops on the site. We’ll pass the
arguments to Ssuperstar and then we'll loop the
content, like this:

001 <?php

002 // Arguments for WP.Query

003 $args = array(

004 'category.name' =>

* superstar t

005 H showposts h => 5

006 );

007 // The new loop stored in

Ssuperstar

008 Ssuperstar = new WP_Query( Sargs

);

005 while ( $superstar->have_posts()

) ; $superstar->the_post(); ?>

010 <1— Loop output goes here

— >

011 <?php

tutorials

Tabbed boxes with multiple loops for WorclPress themes |

•We now have our n rst
loop, showing five posts
from the superstar
category in a 11st at the
top of thffi site Estep &}

IrtXUkirtm

IMttijpg*

■This Is wherein put my
tabbed box of links

* This Is wlial the tabbed
box will look like,a simple
design without the need
far extensive CSS

> All three loops are in
place, each with Iheirown
list,The next step will be
to ma ke them a tab bed
box instead

// Loop ends
endwhile;

// Reset the query
wp_reset_postdata{);

Just what we want

Let's put this into our loop, also adding a div and
ul container, like so:

001 <div id= ,F tabbed-box ”>

Avoid query,
postsO

While it is entirely possible
to use query_postsO to
create multiple loops, you
should avoid doing so
query_postsO is meant for
small alterations of the J
main loop.

Are they really making sequels tn movies

This loop will fetch the five latest, posts from the
category superstar.

Populating the new loop

Now, we need some actual output as well. Look
at the code in the previous step, we'll replace the Loop
output goes here comment with actual linked titles to
the posts. We'll place these links in a list, so we need to

002 <ul>

003 <?php

004 // Arguments for wp_Query

005 Sargs = array(

006 p category_name J =>

'superstar h ,

007 F showpasts" => 5

008 );

009 // The new loop stored in

014 <?php the_title(); ?>

015 </a>

016 </li>

017 <?php

018 // Loop ends

019 endwhile;

020 // Reset the query

021 wp_reset_postdata();

put each in a li as well.

001 <li>

Ssuperstar

010 Ssuperstar = new WR_Query( fcargs

);

022 ?>

023 </ul>

024 </div>

002 <a href="<?php the_permalink();
?>" title="<?php the_title_attribute();
?> w >

003 <?php the_title(); ?>

004 </a>

005 </li>

011 while ( Ssuperstar->have_posts()
) : Ssuperstar->the_post(); ?>

012 <li>

013 <a href-”<?php the_

permalinkQ; ?> JP title= FJ <?php the_title^
attribute(}; ?>“>

Don’t forget to reset

Why do you need to reset the data? Weil, if you
don't you might end up with an altered query for
subsequent loops, and that is usually such a headache
to sort out. Use wp_reset_postdataO after your loops.

tutorials

I Tabbed boxes with multiple loops for WordPress themes

Always queue
properly

The purpose of using
WordPress queue
methods for JavaScript is
to rely on the platform to
make sure everything
is loaded at the
optimal moment.

Create another loop

it is lime to create our second loop, this one with

016 // Lwp ends

017 endwhile;

018 // Reset the query
019 wp_reset_postdataQ;

020 ?>

og Tag instead of category loop

Wouldn't it bo great if our third and final loop
gave us five posts tagged with duck and/or rabbit?
Basical ly, let's remove the category argument and

017 endwhile;

018 // Reset the query

019 wp_ re se tjpostdata();

020 ?>

ijA Three loops

now we have three different loops-, each in a list
of their own, Add a heading above the post lists to
make them stand out from each other. Here's the full
code, including the wrapping div and ul tags around

five posts sourced from the Movies category. You'll no
doubt recognise the code, the only change from the
Superstar loop being the category and using Smovies
instead of $superstar,

001 <?php

002 // .Arguments for WF_Query

003 Sargs - array!

004 'category_naine r -> J movies',

005 “showposts' => 5

006 );

007 // The new loop stored in Smovies

008 Smovies = new WP_Query( Sargs );

009 while ( $fi»ovies->have_pQ3t3() ) :
levies->the_post(); ?>

010 <li>

011 <a href="<7php the_pemialink0; 7>''

title= J '<7php the_titie_attribute(); ?>">

012 <;?php the_titleQ; ?>

013 </a>

014 </li>

815 <?php

replace it with one for tags, this one accepting posts
tagged with duck and/or rabbit. Both will work, as will
fust one of them.

001 <?php

002 // Arguments for W^Query

003 iargs - array!

004 'tag' -> 'duck,rabbit',

005 'showposts 1 => 5

006 );

007 // The new loop stored in $duckrabbit

008 $duckrabbit = new WP_Query( Sargs );

009 while ( $duckrabbit->have_posts0 ) :

td uck rabbit->the_post(); 1>

010 <li>

011 <a href="<?php the_permalinkO;

?>“' title='<?php the_title_attribute(); 7>‘>
012 <?php the_titleQ; 7>

813 </a>

814 </U>

815 <?php

816 // Loop ends

each loop so the lists will work properly.

001 <div id=” tabbed-bo k if >

002 <!— First loop, 5 posts from SUPERSTAR

category

003 <h3>5 Superstar Posts</h3>

004 <ul>

005 <?php

006 // Arguments for WP_Query

007 $args = array!

008 f category_name' => 'superstar',

009 'showposts' => 5

010 );

011 // The new loop stored in

Ssuperstar

012 Ssuperstar = new WP_Query( Sargs );

013 while! Ssuperstar->have_postsQ )

: $superstar->the_post(); ?>

014 <li>

01S <a href="<?php the_permalinkO;

?> J ' title- J '<?php the_title_attribute(); ?>">

fuforials

Tabbed boxes with multiple loops for WorclPress themes |

016 <?php the_titleQ; ?>

017 </a>

018 </li>

019 <?php

020 // Loop ends

021 endwhile;

022 // Reset the query

02 3 wp_res e t_postcf a ta ();

024 ?>

025 </ul>

026 <! — Second loop, 5 posts from MOVIES

category — >

027 <h3>5 Movies Posts</h3>

028 <ul>

029 <?php

000 // Arguiaents for WP_Query

031 largs = array (

032 J category_na[ne r 'movies',

033 'showposts' => 5

034 );

035 // The new loop stored in $movies

036 kiovies = new WP_Query( Jargs );

037 while ( $movies->have_postsO ) :

$r>ovies->the_postQ ; ?>

038 <li>

039 <3 href=”<7php the_permalinlk();

7>" title=''<.?php the w title_attribute i O; ?>">
040 <?php the„title(); ?>

041 </a>

042 </li>

043 <?php

044 // Loop ends

045 endwhile;

046 // Reset the query

04 7 wp_res e t_postda ta();

048 ?>

049 </ul>

050 <!— Third loop, 5 posts tagged with

DUCK and/or RABBIT —>

051 <h3>5 Duck and/or Rabbit Posts</h3>

052 <ul>

053 <?php

054 // Arguiwnts for WP_Query

055 $args = arrayf

056 'tag' -> 'duck, rabbit' ,

057 'showposts' => 5

058 );

059 // The new loop stored in

$duckrabbit

060 $duckrabbit = new ViP_Query( Sargs

);

061 while ( $duckrabbit->have_postsQ )

: $duckrabbit->the_post(); ?>

062 <li>

063 <a href-"<?php the_permalinkO ;

7> ir title= J, <1php the_title_attribute(); ?>”>

064 <?php the_title(); ?>

1065 </a>

J066 </li>

067 <7php

068 // Loop ends

069 endwhile;

070 // Reset the query

071 wp_reset_postda ta();

072 >>

073 </ul>

074 </div>

The tabbed box design

For this example we're going to go with a simple
tabbed box., with each tab heading sporting a nice fat
line above itself, The active one is highlighted with a
black line, while the others are differentiated by having
light grey ones instead. Within the tab is a simple list of
links with lines separating them. Nothing fancy, just
something simple. You could of course create anything
you want; it is all CSS anyway.

The tabbed box markup

The markup for the tabbed box is really simple.
We’ll have a ultftabs with a li for each tab link. Then we'll
have three div containers, each containing the content
of each tab.

001 <gl id-'tabs">

002 <1i id-'tab-content-supersta r"

class= M tab-item active-tab">

003 <a href= l 'java£cript:viewTab('content-

superstar'); ‘'>Superstar</a>

004 </li>

005 <li id="tab-eonterit-movies" class^'tab-
item">

006 <a href-"javascript:vlewTab( f content¬

ion i es J ); ">Mov i es</ a>

007 </li>

008 <li id-' , tab-content-duckrabbit <l
c lass= " ta b- i tern ">

009 <a href^" 1 javascript: viewTab{'content-

duckrabbit') j'^Duck + Rabbit</a>

010 </li>

011 </ul>

012 <div id=s ri tabbed-box J, >

013 <div id= N con tent-super star' 1 class= J 'tab-
content'^

014 Content for Superstar tab,

015 </div>

016 <div id="content-movies" class= w tab-
content" style-"display; none;">

017 Content for Movies tab,

018 </div>

019 <div id^content-duckrabbit"
class= r, tab-content p ' style="display: none; r '>
020 Content for Duck + Rabbit tab,

021 </div>

022 </div>

Adding some CSS

Just the rra-kuo a one won't make t ic markup
look like we planned, so here's the necessary CSS for
making it work.

001 ulfltabs {

002 float: left;

003 width: im;

004 margin: G;

005 padding: 0;

006 list-style: none;

007 }

008

009 li.tab-item {

010 float; left;

011 inargin-bottom; -Ipx;

012 margin-right: 10px;

013 padding: 5px 0;

014 border-top: 5px solid ieee;

015 }

016

017 li.acfive-tab {

018 border-top-color; #G0G;

019 }

020

021 divfftabbed-box G
022

023 div r tab-content {

024 float; left;

025 width: 100%;

026 margin-bottom: 30px;

Tabbed boxes and
wid geta reas

There are a number of things you
could do with tabbed boxes and the
technique presented in this tutorial.
Thanks to thef legibility of widget
areas, and the plethora of widgets
available through plug ins for
WordPress, it might be a better fit for
your needs, rather than using loops.
Employing widget areas instead of
loops is easy. Just create a dedicated
widget area per tab (Infunctions.ohD.
as usual >, and then use dynamic,
sldefoarO to include them ratheTthan
the loops. This will let you drop
widgets in the different tabs and
hence offer whatever functionality
you might like. You could take it even
further and let each widget become a
tab on Its own, although that means
you’ll have to alter the JavaScript and
markup quite a hit.

tutoriaLs 65

I Tabbed boxes with multiple loops for WordPress themes

027 background-color: #eee;

028 }

029

030 div. tab-content ul {

031 margin: 0;

032 padding-top: 5px;

033 }

034

035 div. tab-content ul li C
036 margin-bottom: 5px;

037 padding: 0 10px 5px l@px;

038 border-bottom: Ipx solid fJfBfBfB;

039 list-style: none;

040 }

041

042 div.tab-content ul li:last-child {

043 border-bottom-width: 0;

044 padding-bottom: 0;

045 }

Loading jQuery

The JavaScript that we use for this tabbed box
requires jQuery, so we need to make sure jQuery is
loaded. We'll do this in the theme's fnnrtior.s pop
because it is better than having to add stuff in the head
section in head&r.oho. This is easily done with wp_
enqueue, scnptO, and since WordPress ships with
jQuery we just need to pass 'jquery' to it.

001 wp_enqueue_script( 'jquery' );

Queuing jQuery

To properly queue jQue-y well need to create a
function that we will then hook onto the wp_enqueue
scripts hook, hence properly including the script the
way WordPress wants us to, In functions,oho we'il create
the wd200_scriptloaderQ function that will contain all
the scripts we need, and then well attach it to the hook
with add_actionQ.

006 jQuery.each(elements, function^index,
value) C

007 If Is clicked tab

008

if (jQuery(this),attr( J id') --

tabid) {

009

If Show element

010

jQuery(this) r css({

'display':

'block 1 });

011

If Make sure CSS is correct for

tab

012

j Query ('If tab-'+ jQuery{this),

attr( J id')).addClass(’active-tab’);

013

014

If Is not the clicked tab

015

else {

016

If Hide tab

017

jQuery(this).css((

'display':

:'none“ });

018

If Make sure CSS is correct for

tab

019

jQuery( J #tab-'+ jQuery(this),

attr('id f )).removeClas5('active-tab');

020 }

021 ));

Registering the
tabbedbox.is script

Although we could just include that in the head section,
it wouldn't be such a pretty solution. Let's register the
script so that WordPress can use it with wp_negister_
scriptQ. The first parameter is the handle well use to
include it in just a Pit the second points us to where the
script is located. Note the use of get_stylesheet_
directory uriO here, which works with both child and
parent themes. The script is in the theme's js folder.

001 wp_register_script( 'tabbedbox_scri.pt 1 r
get_stylesheet_directory_uriQ . 7js/
tabbedbox.jV );

001 function wd200_scriptlaader() {

002 // Enqueue the script

003 wp_enqueue_script( 'jquery' );

004 }

005 add_action( J wp_enqueue_scripts', wd20®_
scriptloader );

ie The necessary JavaScript

™ ™ Now, we need another JavaScript for the actual
tabbed box. This script basically changes the display
elements of the tab content containers, as well as
applying the active-tab class on the active one.

001 // Function to view tab
002 function viewTab{tabid) {

003 // Get all child elements of J 'tabbed -

box' 1

004 var elements = jQuery('#tabbed"box'),
childrenQ;

005 // Loop through them all

Queuing the JavaScript
properly

Now we just need to add the script registration to the
function we created in step 15. along with actually
queueing the script and it should load properly.

001 function wd2@0_scriptloader() {

002

003 // Register your script

004 wp_register_script( 'tabbedbox_5cript',

get_stylesheet_directory_uri() . Vjs/
tabbedbox.js' );

005

006 If Enqueue the script

00 7 wp_enqueu e_script( 'tabbedbox_sc ript J

);

008 wp_enqueue_script( 'jquery' );

009 }

018 add_action( 'wp_enqueue_scripts 1 , wd?0®_
scriptloader );

A working tabbed box

Look at that, we have a working tabbed box!
Unfortunately there's nothing you'd want to show your
grandparents in it. so we'll have to add the loops we
created before. First of all. add another div container to
wrap the whole thing in. give it the id tabbed-box-
container and add the following to style,css

001 stabbed-box-container {

002 width: 1®0% f
003 display: block;

004 }

lQ Adding the loops

This is easy enough, just copy ahd paste the
corresponding loop to each tab content div container
Here's the Superstar category loop for reference. Note
the removal of the h3 heading since that doesn’t make
sense when you have a visual indicator in the active tab.

001 <!-- First loop, 5 posts from SUPERSTAR
category —>

002 <div id-"content -superstar" class=''tab-
content H >

003 <ul>

004 <?php

005 If Arguments for WP_Query

006 Sargs = array(

007 'categcry_name p => 'superstar',

008 'showposts' => 5

009 );

010 // The new loop stored in Ssuperstar

011 Ssuperstar - new wp_Query( $args };

012 while ( $superstar->h3ve_postsQ ) :

$5upe rsta r->t he_post() ; ?>

013 <li>

014 <a href-'<?php tbe_peniallnk();

?>*' title="T?php the_title_attribute(); 7 > u >

015 <?php the_title(); 7>

016 </a>

017 </li>

018 <?php

019 If Loop ends

020 endwhile;

021 // Reset the query

022 wp_reset_postdataQ;

023 1 >

024 </yl>

025 </div>

21 In all its glory

This is all there is to it. The complete code for the
tabbed box is on the coverdisc, loops and all.

Save and test

You'll find the finished code as a working child
theme on the disc. The theme is free to use and abuse,
so take what you need from it ahd build your own. Just
remember that you need the parent theme installed for
a child theme to work, in this case Twenty Ten.

tutorials

The future of Linux
is in your hands

Live booting 4-distro DVD free with every issue

The magazine
for the GNU
generation

In print and online

UnuxUsetcoi*

» The essential read for Linux enthusiasts
» Exclusive developer-dedicated mini-mag
» The latest news from the global community
» Tutorials helping you master new techniques

Quality print edition on sate at imagineshop .co.uk
Interactive digital edition on all platforms on sale at

www.greatd igitalm ags .com good newsagents

| Builcl an HTML5 friend-finding apjp: part 1

Build an
HTML5
friend-finding
app: parti

HTML5 has some amazing APIs that
allow web developers to make smart
sites w :h geolocation aware tech

tools I tech trends PHP. MySQL HTML5. CSS3
expert Sam Hampton-Smith

recent survey showed the
UK has a smartphone
penetration of over 50 per
Ann:::::; cent, meaning more than

half of UK mobile phone
users have a smartphone,
The is fantastic news for us
web developers, because
we can really start to take
advantage of the many

unique features these devices have, building exciting new
sites and applications with smartphones in mind, One of
the benefits of the modern smartphone is that it typically
supports HTML5 out the box. and in this two-part tutorial
we'll use one of the other common features - GPS - in
combination with HTML5's geolocation API to build a
friend-finding app In the vein of Apple's Find My Friends
iPhone am. This month we're going to set up the
server-side parts needed to support our apo. including a
database, security and the basics of allowing users to share
thee details with friends. Next month well connect to the
geolocabon API and use it to present our users' locations.

tutorials

Build an HTML5 friencl-finding app: part 11

Create a database

Our web application is going to need a database,
server-side scripts and client-side scnpts to work. We'll
start off by creating the database, and for this project
we've opted for MySQL as the database system. Create
a new database on your Webserver and name it
Triendfinder'. Ask your host if you're unsure of how to
access your MySQL database.

008 'longitude' DOUBLE NOT NULL r
009 'hidelocafion' INfT NOT NULL ,

010 PRIMARY KEY ( 'userid' )

011 ) ENGINE = MYISAM ;

A word on security

For the purposes of a tesLyou might be
tempted to store the user's password as plain text, but
you should never be tempted to do this. Instead, when
it's time to store data in our table, make sure you run
the password through an MD5 hash to encode the
password data. It's essential to consider security at
every stage.

0 2 Create a user table

The core functionality of our app will be to
enable friends to see each other's locations on a map.

To do this, we'll need somewhere to store details - a user
table. This will need to store both the user's details, such
as their name and email address, and their Sast known
location expressed in latitude and longitude.

we're also going to require users to log in with a
password, and well give them a marker to allow them to
go private with their location. Although this isn't strictly
necessary (as they could jusi leave the webpage), it's

relationships between a user and their approved friends.
To make it more user friendly, we're also going to allow
users to approve friends fora limited period of time, so
well create a field to store a permission expiry date.

001 CREATE TABLE friendfinder','friends 1 (

002 'userid' INT NOT NULL f
003 'friendid' INT NOT NULL ,

004 'expires' DATETItC NOT NULL
005 ) ENGINE = MYISAM ;

001 CREATE TABLE 'friendfinder'. users' (
002 'userid' INT NOT NULL AL/TO_INCREMENT r
003 'firstname' VARCKARC 100 ) NOT NULL r
004 'surname' VARCKARf 100 ) NOT NULL ,
005 'email' VARCHAR( 255 ) NOT NULL ,

006 'password' VARCHAR( I00 ) NOT NULL „
007 'latitude' DOUBLE NOT NULL f

app to automatically allow access both ways when a
user approves a friend for access, but we suggest that
each user should approve their friends independently
for maximum security. This means that when we
perform lookups later on, it's important to know who
has approved whom - rather than Just who is
connected to whom.

07 Sign-up forms

Well need to provide some form of method for
users to register with our website, so let’s start by
creating a basic HTML form to collect the user's
details. Keep in mind that we'll need to create form
elements for all the data we defined in the user table.
Save your HTML page as ’ reefster.pfip' n anticipation of
the next step!

001 <!doctype html>

002 <html>

003 <head>

004 <meta charset="UTF-8">

005 <title>Friend Finder - Create An
Account</title>

006 </head>

007 <body>

008 <fortn action-’register, php”

itiethod="post J ’>

009 <Label>Firstname cinput type="text”

naine="f i rstname” placeholder="First name"
/><span>Enter your first name^/span></label>

010 <iabel>Sumame <input type="text”

name-lastname” placeholder=”Last name"
/><span>Enter your family name</spanx/label>
011 <label>Endail <input types”text”

nane^'email" piacehalder= "Email address”
/X.span>Enter valid address</span></label>

012 < label Password < input

type-'password 11 name-" pas sword" /xspan^Minimum

6 characters</spanx/label>

013 <label>8nbsp; <input type="submit"

value=”Register with Friend Finder” /x/label>
014 </form>

015 </body>

016 </hti!nI>

Store the data

The fo-m we've just created costs back to itself,
so let's add some RHP processing at the top of the page
to handle post-backs and write the submitted data to
the database, Add the code shown to create a simple
implementation of this. Substitute in the connection
details for your own MySQL database.

001 <!doctype html>

002 <html>

003 <head>

004 ■qneta charset="UTF-8">

005 <tit!e>Friend Finder - Create An

Accou nt </t i tl e>

006 </head>

007 <body>

008 <?php

009 if (isset($_POST[‘firstname’])

8& isset($_POST['surname’]) &&, isset(£_

POST['email*]) isset(SjPOST['password'])) {

Now that the form has been submitted, let's go ahead
and create the account in the database.

tutorials

| Builcl an HTML5 friend-finding app: part 1

001 Sfirstname = $_POST[*firstriame'];

002 {surname - S_POST[ 4 surnaine'];

003 {email = S_POST[ H email' ];

004 Spassword - $_PQST[ 4 password'];

005

006 $db = mysql_connect("localhost” t

"friendf'inder”, “dbpassword”) or die("ERRQR:
unable to connect to the database server,”);
007 inysq 1 _se 1 ect_d b(“f r iend finde r" , Sdb)

or die TERROR i unable to connect to the
database,”);

008

009 tsql = “INSERT INTO users

(firstname, surname, email, password) VALUES
('{first name','{surname' ,'{email' /Spasswo
rd*)*;

010 Sresult = mfysql_query($sql) or

dieC 4 ERRORi unable to query the database, <! —
”.$sql. ;

011 mysql_close ( ) ;

012

013 } else {

014 7 >

015 <form action^” register, php"

method="post ft >

016 <label>Firstname <input type="text”

name=”firstname” placehclder=”First name”
/xspan>Enter your first name</spanx/label>
017 <,label>Surname <input type= H text”

name-'lastname” placeholder- -Last name”
/xspanoEnter your family name</5panx/label>
018 <label>Email <input type=”text”

naie=' r email” placeholder=”EinaLl address”
/XsparOEnter valid address</spanx/label>

019 <label>Password <inpgt

type-'password” naroe-'password” /Xspan>MininMI
6 characters</spanx/label>

020 <label>&nbsp; <input type=”submit"

value=”Register with Friend Finder” /x/label>
021 </form>

022 <?php } ?>

023 </body>

024 </html>

09 Error checking

As with any user input, we need to ensure we've
validated it before writing it to the database, and most

Importantly, protect ourselves against any SQL injection
attacks. We can do this with a couple of utility methods
to clean the input and validate it. Update your code to
match our changes. The code for this step can be found

on the coverdisc.

IQ Create a log-in form

Once the user has registered, they'll need a way
to log in. This is simple to achieve - create a form to
collect the user's email address and password, then run
a query on the database using the submitted values to

check for validity. If the credentials are good, a row will

be returned and we can create a user session.

001 <!doctype html>

002 <html>

003 <head>

004 <meta eharset=”UTF-8”>

005 <title>Friend Finder - Log In</title>

006 </head>

007 <body>

008 <?php

009 if tisset(S_POST[ 'email']) && isset({_

POSTC*password'])) {

010 If The form has been submitted, so let's
check the details

011 {email = cleaninput($_POST[ ' email’]);

Clean the email address

012 {password - md5($JP05T[‘password']);

013 Password has been MD5 hashed

014 $db - mysql .connect("local host”,

"friend finder”, 44 dbpas sword”) or die(“ERR?OR]
unable to connect to the database server.");

01B mysql_selec t_db ( “f r iendf inder ” r let))

or die(“ERROR. unable to connect to the
database,

016 Isql = "select * from users where
em7il=’ {email' and passworch’ Spas sword'”;

017 {result = mysql_query({sql) or

die(“ERRGR: unable to query the database. <! —
”.{sql.

018 mrysql-closeO;

019 if {inysql_num_rowsC$result)>0) {

020 // We've got a record, so the user has
provided good details
021 } else {

022 // No records returned - so it’s an invalid
username and password combination

023 }

024 } else {

025 ?>

026 <form act ion-" log in. php” method-”post">
027 <label>EmaLl <input type-”text”
name=” email” placeholder^” Email address" fxf
label>

028 <label Password <input type="password”
name=”pas sword” /X/label>

029 <label>&nbsp; <input type- 'submit”
value=”Log In” /x7label>

030 </fornr>

031 <7php } 7>

032 </body>

033 </html
034 <?php

035 function cleaninput(Sinp) {

036 // This function cleans out any bad strings
before insert to database
037 if(is_array({inp))

038 return array Jt^p( _METHOD_, Sinp) ;

039 if(!empty(Sinp) && is_£tring({inp)) {

040 return str_replace(array( i \\ t , lI \0 dd ,
"\n dd , "\r*, “ ?d * p M \xia") r array('S\\V ,

4 \\@ d , '\W , - \\r ', Hi \V\ 4 \V** P
Sinp);

Building for mobile
devices

Website design for mobile devices Is
exactly the same as design for a
desktop. The only real difference yon
should consider Is the screen real
estate, and lack of a mouse, Otherwise,
all the same skills you employ In
designing for a regular computer will
apply here.

There ate lots of online tools that
can help you quickly design effectively
for mobile platforms. These vary from
simple CSS frameworks that help you
define rules appropriate to the device,
to fully-fledged webapp development
systems. In this tutorial we touch on
using jquery Mobile, which falls Into
the latter category.

iQuery mobile also has an excel lent
resource, ThemeRoller, for creating
aesthetic tr eatments for your mobile
sites. This works really well If you're
using the standard user controls. Don't
be afraid to think outside the box
though - it often pays to be original
with user interface.

041 }

042 return {inp;
043 }

044 7>

Create an invitation

We're going to allow users to invite their friends
to view their location on a map. To do this well
create another page and form, this time asking a
logged-in user to enter the email address of the friend
with whom they want to share their location. We'll use

lulnrials

Build an HTML5 friencl-finding app: part 11

this to generate an email to the friend, inviting them to
accept the offer.

001 <Jdcietype html>

002 <html>

003 <head>

004 <meta char5et=”inT-8 s '>

005 <title>Friend Finder - Invite</title>

006 </head>

007 <body>

008 <7php

009 if (isset($_FOST['email']) &&

is5et(t_

P0ST['nai*e h ]» {

010 // The form has been submitted, so

let's check the details

011

012 Semail = cleaninput($_POST[ 4 email r ])j

// Clean the email address

013 Inane = cleaninput(IJPOST['name']);

// Clean the email address

014

015 $db = mysql.connectCMocalhost”,
44 friendfinder", 44 dbpassv«}rd”) or die (“ERROR:
unable to connect to the database server,");
016 mysql_select_db( cc frLendf inder” r $db)
or die(“ERROR; unable to connect to the
database.");

017 // $sql - 44 ,.

018 // Sresult = mysql_query(Ssql) or
die ( 44 ERROR: unable to query the database.

<! —

019// iDysql_close();

020 } else {

021 ?>

022 <forn action-'invite.php"
method="post”>

023 <label>Friend's Email <input

type=”text” name=”email”

placeholder=”Friend’s
Email address" /></label>

024 <label>Friend r s Name <input

type=”text” nane=”name” placeholder^ ri end's

Name” /x/label>

025 <label>&nbsp; <input type= ff submit”

value=”Invite to share your location" /></
label>

026 </forn£>

027 <?php } ?>

028 </body>

</html>

<7php

029 function cleaninput(Sinp) {

030 // This function cleans out any bad

strings before insert to database
031 if(is_array(linp))

032 return array_map(_METHOD_, Sinp);

033 if(lempty(linp) is_string($inp)) {
034 return str_replace(array( i W, w \8”,
44 \n", "\r* t iitn t *"*, 44 \xla"), arrayt'WW,
*U0\ *Un\ H \\r\ *\V W , 4 \\ B, P 4 \\Z') P
Sinp);

@35 }

036 return $inp;

037 }

038 7 >

12 Store pending invitations

For security, we can’t rely on passing the user
and friend details through a URL. Instead, we’ll create
another table for pending Invitations and send an email
that uses the primary key in the accept address to
abstract the user’s details, Create a table to store the
friend’s details, then check to see if the friend already
exists before sending an email to invite them.

001 CREATE TABLE 'friendfinder*.'invitations' (
002 'inviteid' INT NOT NULL AUTO_INCREMENT
003 'userid' INT NOT NULL r
004 ^name' VaRCHAR( 255 ) NOT NULL ,

005 'email' VARCHAR{ 255 ) NOT NULL ,

006 'approved v INT NOT NULL ,

007 PRIMARY KEY ( 'inviteid' )

008 ) ENGINE = MY I SAM ;

13 Handle invites to non-users

^ f a friend receives an invite before they’ve
created a user account, we need to invite them to
create an account before they can accept the invitation.
To do this, we ll redirect them to our register form,
pre-fiiling their email address and name from the
pending invitation table,

Test

■ v N'ow we’ve got our complete set of server-side
scripts set up. we need to thoroughly test the
functionality. To do this you're going to need to create

several accounts, with different email accounts, and
invite different 'friends’ to check the emails work. Make
sure the database records are setup accordingly.

15 Make it pretty

Th e chances are that visitors to our site will be
accessing from a mobile device, especially once weVe
added the geolocation positioning in next month's
concluding part. Add some basic CSS to give your
pages a smartphone orientated design. Make use of @
media queries to change the design to fit the screen
size of the device accessing the page.

Codiqa

fUD

tutoriaLs

| Builcl an HTML5 friend-finding apjp: part 1

jQuery mobile

The main application, once a user has signed up
and invited friends to view their location, will consist of
an interactive map that shows the device's current
location, and super-imposes the position of local friends
onto the map. To make this easier well use jQuery
mobile, found al www.iquervmobile.com

17 Create the skeleton

The final thing we need to do (before moving on
to the client-side script next month) is to create the
skeleton [Query mobile page that will hold all our user
interaction with the map. Create a new page using the
code shown, and save it as 'friend-finder.htmr. Make
sure you've included the jQuery libraries.

Code library

Our app will make use of user records to let friends share their location
with each other. First they need to register an account. Full code on disc

This section of PHP
code checks to see If
the form has been
submitted, and If it
has, it cleans up the
Input and creates a
user record within
the database.

We store the
password with an
MD5 hash. This
means the password
Isn't plain tent any
more, and provides
additional security
for our users.

Our form makes use
ofthenewHTMLS
input type email to
allow for browser-led
validation, ttalso
means that on mobile
devices the
sof t-keyboard will be
Specific lo t he data
type being entered.

001 c’doctype html>

■002 <html5-
003 <head>

004 <meta charset=”IJTF-8 r >

005 <title>FrierK] Finder - Create An Accountstitle>

006 <link rel="stylesheet" href=''styles/screen.cs5” type-’text/

css" O
007 </head>

008 <body>

009 <?php

010 if (isset($_FOST[ f firstname']) && issetltJ^OSTL"surname 1 ])

&& isset(S_P0ST['email’]) && isset($_PDST['password'])) {

011 // The form has been submitted, so let's create the

account in the database

012

013 $firstname = cleaninput($_PQ5T[‘firstname 1 ]); // Clean
the first name

014 Ssurname = cleaninput ($_P05T[*surname’]); // Clean the
last name

015 Setmail = cleaninput(S_POST[‘email’]); // Clean the email
address

016 Spassword = md5($LP0ST['password’]); // Password has
been MD5 hashed

017

016 Sdb = mysql_oonnect("localhost”, “friendfinder”,

“dbpassword") or die(“ERROR: unable to connect to the database
server,");

019 mysql_select_db("friendfinder" r $db) or die("ERROR:

unable to connect to the database.");

020

021 Ssql = “INSERT INTO users (firstname, surname, email,
pa ssword) VALUES ( H tfirstname', r $su rname ? , r $ema i 1 * / $password ')";
022 {result - myaql_query($sql) or die (“ERROR: unable to
query the database, $sql,”—>>');

023 inysql_closeO;

024

025 > else {

026 7>

027 <form actionp'Tegister.php” method="post”>

028 <label>Firstname <input type="text’' name="firstname"

placeholder=”First name” /Xspan>Enter your first name</spanx/
label>

029 <label>Surname <input type-’text" name-’lastname"

placeholder=”Last name" /Xspan^Enter ycur family narne</spanx/
label>

030 <label>Emai1 cinput type="text" name=”email”

placeholder=”Email address" /xspan>Enter valid address</spanx/
label>

031 <label>Password <input type=''password" name="password”

/Xspan^Miniimm 6 characters</sparix/label>

032 clabel^Snbsp; <input type=”submit" valueF"Register with

Friend Finder” /X/Iabel>

033 </form>

034 <?php } 7>

tutorials

Design for a better web

hobbyists and professionals

Back issues

isl K4H l- u- Ej-mxl-ix- TO?

• siiis.isi desraner P.vf

itufinln; wrtiiw

<rsaf'«9 sl

DVDs

Web Desert: From Desktop
to Dotcom eMag Vd, 1

A visual fcuide to Flash.
Dreamweaver and Photoshop.
256 pages of waUdhraughs
nr one disc* A project-based
workout lor a ny webshngflf I
Master tools, receive technical
advice and read inspirational
features.

£4,99

BWeb Design Vol. 6

Creative gutfes ror designing
next’gen websites, in-depth
features to bring you up
to spaed or all the hottest
technologies. Step-by-step
tutorials showing you how¬
to design amazing website!
using CSS3.HTML5. Flash.
Photoshop and more
£14.99

Web Des^n VbL5

Tiusbook provides a
comprehensive collection ot
visual lessons on t he es-senl iai
techniques needed to create
awe -i rre paring websites.

£6.49 with code "DOTCOM"

Web Desigpcr eMag Vo|. 1

Enjoy 21 isswsof Web
Designer on one interactive
drsc. Over 1800 pages
of expert tutorials, case
studies & features, Plus
bon us tutorial workshop files
included.

£9.99

The Web Design Book Vol. 1

Bringing you up to speed with the new digital
landscape, the The Web Design Book Vol. 1 will
give you a tour of the latest developments in
web design and show you how to use these new
tools to create a truly or igi nal s ite.

£14.99

Web Designer eMag Vol. 2

A complete archiveofweb
Designer magazin e issues 137-
MS. Over 824 pages of cutting-
edge trends and techniques!
Free - 25G page Web Design
Vof. 03 boefc.azine included In
pdt format.

£9.99

Order online

die&gnerf

Become an ImagineShop
customer and leave reviews of
your favourite products.

Add creativity and flair to your online projects
with an essential range of training products for

& @imagineshopuk

G /imagineshopuk

MAGAZINES

BOOKS

DVDS

DOWNLOADS

GIFTS

<lutorial£>

Need an Inspirational site dlssected7Q webdesigner@lniaglne-publishing.co.uk

Get creative with CSS
transitions

INSPIRATION

Lovingly crafted
rollovers

inspiration iulie nrenvoy e.com

The main portfolio consists of some
large thumbnail images of the projects.
These thumbnails have been given a

Note

presented to the user, rather than just
loading In one element at a time. This
gives the website a lovingly crafted
feel and the impression that Renvoye
pays dose attention to the minor
details that make a project successful,
The layout is clean and clea re¬
presented with a nice info
graphic at the end of the
page that shows
Renvoye's location and
areas of expertise.

m Link to top

As you scroll down the page you
become aware of a button appearing
which is anchored to the bottom
right-hand corner. This button is a
quick link back to the lop of the
page, and the menu for the site. Little
touches like this help to make the

custom shape. In order to alleviate much
Photoshop frustration, the thumbnail is a
regular square image with a mask placed
over the top. This is simply a transparent
PNG on which the edge is the same
colour as the background. When you roll
over the images, the mask uses a CSS
transform to scale it slightly. This allows
you to see a little more of the
thumbnail image below. A great
touch that highlights a clever use
of transitions.

THINGS YOU

SHOULD
KNOW SPT

SAN C l EGO

Presentation
Each element of the
design animates into
position using CS53
transitions. This gives
the feeling of presenting
the site as opposed to it
Just loading.

Infographic
The bottom of the
page shows the many
skills that the designer
and illustrator has so
that peop le know
exactly what his area
of expertise Is

Thumbnails

The portfolio thumbnails
appear one ata time by fading
i n, They appea r from a central
position on the page, then
zoom out to their fina I
position, giving them real
Impact as they arrive.

Image masks

The portfolio thumbnails
are cleverly created, with
image masks over the fop
of the thumbnail images
to give them that un [quo
and distinct shape that
makes them stand out.

Rollovers

The thumbnail images
have a subtle rollover
effect created using CSS3
transitions. The mask over
the top of the thumbnail
gets slightly larger.,
allowing the user to see
more of the portfolio
thumbnail image.

;;;;;; i:;:;:;:;: hen you first load the
P a 9 e to Julien
Renvoye's portfolio you

»+»*»*«- s + a + s i + b*m+ viviv

:::::::::::: are met with a blank

SSgjj: screen and loading bar.

What follows is the kind
of motion graphic
animation that became
associated with the best sites created
In Flash. The page builds up by each
element using a series of CSS
transitions that allow the page to be

Preloader

The site uses a proloader,

which is the orange bar
along the top-edge of the
site. This shows the
loading before showing
the actual site and
starting th e an f matten,

web workshop

Get creative with CSS transitions |

^comment*

Whafiour

experts, think
oftheslte I

One page portfolio

"J Li lien Renvoyes portfolio site is just a single page to hold the content with
the actual content being shown on new pages. The idea of presenting your
portfolio content on the homepage is good because it presents the user with
the relevant content as soon as the page toads."

Mark Shuffle bottom

technique

Rollover CSS mask transitions

01 Set up the document

Creates new HTML document In Dreamweaver

Add the mask

We now add tiie mask CSS code. Notice the

and add the following code to the document, We are
going to recreate the scaling mask rollover effect using
CSS3 transitions. This sets up an unordered list with a
container div that holds the mask div, and the image div
that holds the image to be masked out.

001 <ul class= fl thumb M xli>

002 <a href'"# ri >

003 <div class= JJ thumbContainer">

004 <div class= JJ mask H x/div>

005 <img src=' f images/thutnb01. jpg M />

006 </divx/a>

007 </lix/ul>

02 Style the document

In the head section of the IITML document add
the following code to create the CSS styles. Here we set
the background colour of the document. The next line

transition time, this is fast so that it is responsive to the
user. When the rollover is called it will be done at this
speed. The image itself is a transparent PNG shape. The
centre of the PNG is cut out so that the image
underneath can be seen through it. The z-index is made
to the highest on the page.

001 .mask {

002 -webkit-transition: all 0.3s ease;
003 position: absolute;

004 background: url(images/thumbMask.

png) no-repeat center;

005 left: 0;

006 top; 0;

007 width; 273px;

008 height: 293px;

009 z-index: 999;

010 }

gives us the transition effect, using the scale property to
increase the size slightly, Notice that we have only
Included one browser prefix here for brevity in the code.

001 body {background: #202024;}

002 ul.thumb li:hover .mask {

003 -webkit-t ransform: scale(1.1);

004 }

03 Style the container

^ we apd the CSS code new for the container,
which holds both the mask and the image. This is set to
a specific width and height in order to keep the mask
and the image aligned at all times. The overflow is set to
hidden to stop any nasty movement when the mask is
increased In size on rollover. Here we'vs set autoplay to
false and told the slide links to open In a blank window
so that the main page stays open behind it. The last
option is the actual portfolio slides that will be shown in
the background.

001 . thumbContairier
002 {

003 width: 273px;

004 height: 293px;

@05 display: block;
006 overflow: hidden;
007 }

os Add the thumbnail

~ * Finally we add the thumbnail image, which Is
positioned two pixels smaller and one pixel in from the
left and top so it can’t be seen at the edge of the mask,
Note that the z-mdex of this div is set lower than the
mask so that this is always behind the mask on the
page. Save the document and test this out in your
browser to see the transitions.

001

,thumbContainer

img {

002

position; absolute;

003

left: lpx;

004

top; lpx;

005

width: 271px;

006

height: 291px;

007

2-index: 990;

}

008

</style>

Creating a mask saves
you having to apply
complicated shapes
to every thumbnail
that you create.
Instead, create one
sha pe of mask and
□ pp ly this to every
image incode.

TECHNIQUE

Creating the mask

To create the rollover effect we need a mask
that will cover our content, so to make this
we need to fire up Photoshop to start
creating an image that has areas of
transparency. This will enable us to see
through it to the thumbnail image below.

Make the image with a transparent

background then click okay to create it. Add
a new layer and fill it completely with the
same colour as youVe used In the
background of your web page.

Use the vector shape tool. «t comes
in a variety off shapes and there are custom
shapes as well. Select an appropriate shape
and draw this within the document. Now go
to Layer>Rasterlze>Choose Layer.

Selectand delete

Go to 5elect>Load Selection end click
OK in the pop up window. Turn off this
shape layer and choose the filled layer from
step 1. Hit the delete key to remove the
shape from the layer. Finally save the image
as a transparent PNG image.

weh workshop

<lutorial£>

Need an inspirational site dissected?0 webdesianer@iniagine-publishinig.co.uic

Mainstream
banner styles

inspiration www.theworldwelivein.co.uk.

www.qeorqebadea.com.

www.malaqa-creation.com/#aqence

:::::::::: o doubt you've spotted

|||||s|:||L :::::: examples of corner

ribbons, small ribbon
badgesandlogobanner
"IlllljlH navigation bars around
” -- ;j -i ” the web. They're not new,

but the bevy of examples
make these trends
mainstream. But what are the reasons behind this
newfound popularity? Many examples can be
seen In portfolio, one-page and 'coming soon'
website designs. Their application seems a direct
response to presenting work over a host of
devices, including smartphones and touch, tablets.

A smaller screen space usually prompts more
white space Therefore standing elements need to
be straightforward in build, yet sophisticated in
style, which many banner examples are. Drop
shadows, embossed and texture effects,
illustrated elements, and rich gradients all add

something. Photoshop CS6, with its latest Shape
tool options makes the creation of banners and
the like much easier Ul designers can now apply
many visual effects from one location.

The Photoshop CS6 Shape tool options offer
users the abili ty to add solid and gradient colour,
and importantly, styled border effects through
Stroke settings, Here you can apply another
popular technique used in modern web design at
the moment, creating a stitch effect - up until now
this has been a drawn out manual process.

Furthermore, these latest Shape tools are now
wholly vector-based. This means that resizing
assets for use across multiple devices and multiple
resolutions can be done freely. Pixelation and the
use of Smart Objects to control asset delineation
is no longer necessary Here we show you the
ways to create said assets with these new CSS
tools and others that can be Implemented to
improve your banner creations.

What our
experts mink
of tiie site

Importing vectors with Photoshop CS6

“Those who create in Illustrator and apply effects in Photoshop will be
pleased to know the two are more allied than ever. When pasting
vectors into Photoshop you no longer have to force resolution,
pasting into a designated selection space. Photoshop CSS now pastes
vector shapes from Illustrator that always align to the pixel boundary."

Adam Smith

WHAT I DO

In EDdiy'icDmpetiliw online linikip. ifi vital that your brand Imip it original, un ique

TECHNIQUE

Create a
web ribbon

We're seeing more and more tangibly
textured web elements, but carbon and
gloss effects still ring true with many digital
designers. So here were offering up an
opportunity for everyone who loves web
20 styles to see how you apply these to
your web ribbons.

Creating these isn't all that hard, utilising
the power of Photoshop Laver Styles and
the Gradient tool. Follow these three easy
steps to discover how to apply these.

0] Masking your shape

Create a light grey rectangle using
the Rectangle Shape tool. Using guides,
make a selection with the Rectangle
Marquee tool, holding Shift for 45-degree
angles. Apply 3 layer mask to this selection,
activate the mask, and invert it (Cmd/CtrN).

Layer Style effects

Open your Layer styles dialogue
and apply Gradient Overlay - gradient
style Silver - from the Metals presets. Set
Opacity at 75 %. Apply a saturated blue
colour with Color Overlay, setting Blend
Mode to Screen, and Opacity at 35 %.

03 Apply gradient

Cmd/Ctrl-clIck your shape layer
Vector mask, Select the Elliptical
Marquee tool, and holding Alt, apply to
create a concave selection. Apply a
White to Transparent style Gradient tool
to this, and Drop Shadow settings.

web workshop

Mainstream banner styles |

wot * CONTACT

- Supplement
ribbons

Here you can see how
web ribbons have
been applied to
reinforce the cha racter
of this personal
one-page website,
displaying the
des igner's age.

Cir cular logo

The effects shown here
a re contemporary again
reflecting the designer’s
portfolio, Stitches and
drop shadows have
been applied to the
main logo to add depth,
and a sense of the
tangible,as is
- fashionable at present

Alternate looks

In each case presented the banners
are anchored by a strong circular
logo. However, the re are many other
examples of banners that go down a
more radical design route. Much like
www.D3doLCom.nl with its floating
interface, or using the triangular
shapes seen at tekkuafor.de.

K- tlOC M-. CONTACT

Welcome

to our one-man design sti

We craft clean Ky j web experiences,
that wc A y devices.

tdio!

- Type and colour

Perfect balance

Less is more

The carbon effects here

Here the designer^

This website has the

aren’t only heightened

logo sits central to the

same creative harmony

by the texture appl kid

option bar, creatin g

as. before. However,

to the options bar, but

symmetry with the

here the embossed

al m the juxtaposition

perf ectly spaced and

11 nes re place defl n able

of small accents of

nu m bered options

options, with the logo

colour , applied to the

situated each side. This

as an anchor to still

logo graphics and

strikes up a focal point

create a sense of a

creative type.

and creates a clean.

banner in the actua 1

—

harmonic banner.

absence of one.

INSPIRATION

Embossed effects

Embossed effects are noticeable with menu bars, but
now creative web type styles have adopted this
method. Previous editions of Photoshop required
manual effects, but CS6 allows you to create them fast
Doing so is simple. Just choose your font, type out
using the Type tool then Cmd/Ctrl-click your layer
selecting Convert to Shape. Now your previous Type
layer is subjected to the same options as all Shape tool
elements, from the new Shape options. He re you can
set a similar colour to your type from the background,
combining low value Stroke settings and Inner Shadow
Layer Style settings to create embossed effects.
Furthermore, these are fully recallable now being vector.

TECHNIQUE

Create a wrap
around ribbon

We’ll shew you how to work up this asset in a
matter of minutes using Photoshop CS6 Shape
tool options, working up stitch and colour
effects along with drop shadows.

Apply a Rounded rectangle shape
with a Radi us of 2px to your i Pad-screen
sized C720 x 1260) template. Using guides,
make a selection with the Rectangle
Marquee tool, holding Shift for 45-degree
angles. Apply a layer mask to this selection
and invert this (Cmd/Ctrl+I).

Create a darker small square with the
Rectangle toot, place behind your template
and. holding Cmd/Ctrl, move the bottom-
corner point up to meet the top-comer
pcHint at a 40-degree angle.

shape,, on top and inside the guides of your
Rounded Rectangle shape- Apply a white
colour dashed line style from the Stroke
Options, masking away both ends. Apply an
Inner Shadow Layer Style and text to achieve
fortifier effect.

web workshop

200 th issue special

Go digital today

• Fully interactive
editions

• Download direct to
your device

• Save up to 40% off
the regular price

• On-sale worldwide
the same day as the
print version

@HTML5 &CSSH ^jQuery ® WorclPress
Special guest edited:

MattMullenweg

ww w,we bdesi g nerma g,co, u k

The king of CSS speaks

Eric Meyer

Great digital magazines on iPad /iPhone

ESI

ftpfHwttotJei

hiiinUMitpvAn -'rtrtg

H0i Qt w* t3» fcorfeng ft * wmwf iMter n
une m Qr*u

Ttn CnUUteiifvctiarb t MCide,(r jpvfeiJbr
«VJT¥ W *n^*ll»T3 Wiki Wtlhr* cl IMh

bwfltJddi bw

tnb-n WT^fydMC&Y. rdfv fw^vln I r
wb*M Ma«umvi>9ICklinlll(

tjif zinio Apple Newsstand

Chances are. if you've been browsing
the latest JavaScript libraries or CSS
frameworks, or even just checking
out demos of cool techniques
created by other developers, you’ll
have seen a link to a page on GitHub

Android phone / Android tablet / Apple Mac / Windows PC

N l-f'l (RiTjIf^-fnTUcjtw^ A

Ml ||t lulLrt

OTt gc.|h—|inct'f Inlahii

frm ttiROiiMlftrt

Save
up to

40 %

off regular print
prices

nUf ill s Jk «puibf ip*u

Download and
enjoy over 20 great
magazines on your
favourite topics...

* Technology * Creativity

* Videogames * Sci-fi

* Science & knowledge

* Digital Photography

Enjoy great magazines
on every device from
one amazing website

Get your digital copies now at

WWW.greaMigitalm9gS.c0m

■ PHOTOMANIPULATION ■ GRAPHICS ■ NEW MEDIA ■ PHOTO EDITING ■ DIGITAL PAINTING ■ TYPOGRAPHY

WANT TO MASTER
PHOTOSHOP?

Inside every issue:

► Over 45 pages of pro techniques

► Inspirational artwork and interviews

► In-depth features on cutting-edge trends

► The latest creative products reviewed and rated

@advancedpshop * i /Advanced Photoshop PhotOShop.co.uk

Get your copy today

Quality print edition on sale at imagineshop .co.uk
Interactive digital edition on all platforms on sale at

www.greatdigitajmags .com

Also available at all
good newsagents

Google Dart ^ JavaScript A/ .net AS3Q

AIR 4^ ColdFusion CF RubyJ} Flex Q PHP

Dedicated to the code-heavy
side of modern online design

Build a URL shortener
with Ruby and Sinatra

Add impact to your brand by adding custom
shortened URLs Page 88

Access Facebook data
with the Graph API

Set up a Facebook app, authenticate users and
integrate photos, feeds and information from
Facebook into a website Page 92

■Pkft

A crash course

Discover how to collaborate with web developers on the
latest techniques and projects via GitHub. Plus, take command
of version control with Git Pa ge 82

contents _

A CRASH COURSE IN GIT

Chances are, if you’ve been browsing
the latest JavaScript libraries or CSS
frameworks, or even just checking
out demos of cool techniques
created by other developers, you’ll
have seen a link to a page on GitHub

I ncreasingly, if you want to collaborate with
other web developers on any kind of project,
GitHub is where you'll go.

GitHub, at its core, is an online host of Git
repositories. What's Git, you ask? Git is a
revision control system (also called a source
code management, or version control
system), if youve ever found yourself
working on a site and had a number of folders, each
named mysiteversionl mysite_version2, and soon,
you've inadvertently created your own revision
control system, albeit a very inefficient one.

Using Git (or any other revision control system)
allows you a far greater degree of control over those
revisions, and it also greatly facilitates collaboration
between different developers (often in different
locations) working on the same project.

Let's look at a few situations where revision
control comes in really handy. Let's say you have a
website, and you want to experiment with a different
layout. Because this will involve rewriting big chunks
of your CSS, you r d normally have a few options:
create an entirely separate copy of the website in a

Getting started

Before we can grab a project on GitHub and start
contributing to it, we'll need to learn a bit about how Git
works independently of GitHub.

First things first that means installing Git. Head over
to qit-scm.com/downloads and follow the instructions
for your platform otf choice.

For all the examples in this article, we’ll be working
with Git from the command line. On Linux and Mac.
this will be your built-in terminal application. On
W'ndows.use the Git Bash application provided by the
Git installer

Configuring Git

Before we start, we have a few quick configuration
steps to go through, Git not only stores a record of the
changes made to a project, but a record of who made
those changes. For this to work properly, we first need
to tel; Git who we are.

Open up your terminal (or the Git Bash program if
you happen to be using W.ndows), and run the

separate folder, or perhaps just comment out all your
existing layout CSS temporarily.

Both of these approaches have significant
drawbacks: in the first case, you might wind up making
changes to other aspects of the CSS (say, fonts or
colours) in tine primary (live) version of your site, which
you'd lose if you simply copied your alternate layout
CSS over the top of it when you were done. In the
second case, you'd actually be unable to make changes
to your current layout until you were done with the new
one, since they both live in the same file.

It only gets worse if you're working on a team:
another developer may have made changes to the
main CSS file, unbeknown to you. which you'd then
accidentally squash when you copy in your updated
version of the file. Messy.

Revision control solves these issues and makes it
easy to combine different changes made to the same
files (even when those changes are made in parallel by
multiple developers), experiment with alternate versions
of your code while retaining the ability to switch back to
the primary version painlessly, and keep a complete log
of all the changes you’ve made.

following two commands, using your own name and
ernait address:

001 git config --global user.name “Louis
Simoneau”

002 git config --global user.email "louis@
flippa.com”

Wow you're ready to start using Git!

Repositories

A collection of files living in a directory and managed
by Git is called a repository. Whenever you’re working
with Git you'll be working in a repository, whether it's
one you've created or one you've copied from GitHub.
This could be all the code fora website, ora particular
JavaScript library, or anything you can think of, really.

Let's create a simple Git repository that we can use
to learn all of Git's basic commands.

Create an empty directory, and then navigateto it tn
your terminal. Windows users can nght-dickon the

directory and select the Git Bash option to open a new
Git terminal in that directory. For these examples, we’ll
create a directory called hello.git.

The most basic G it com ma nd, and the one you 11
likely find yourself using the most often, is:

001 git status

Thu will give you information about the status of the
current repository. Go ahead and try it out in the new
hello gil director/; type git status and hit Enter.

001 £ git status

002 fatal: Not a git repository (or any of the
parent directories)

Whoops! Gu r new directory isn't a Git repository (yet),
so Git is complaining mat it can't tel us the status.

Fortunately, turning our newly-created directory into
a Git repository couldn't be easier. Simply type git init
and press Enter

feature_83

A CRASH COURSE IN GIT

0©1 $ git init

002 Initialized empty Git repository in c :/
Users/Louis/hello_gi tf.gitf

If you're using the Git Bash terminal on Windows, you'll
now see the word master in parentheses at the end of
your command prompt This refers to the current
branch your repository is on. but don't worry about
that for now. We are going to discuss branches in more
detail later on.

Now that your directory is a Git repository, try
running git status again, and this time you’ll be
rewarded with a bit more information:

001 £ git status
002 # On branch master
003 #

004 if Initial commit
005 X

006 nothing to commit (create/copy files and
use "git add” to track)

The key bit there is nothing to commit. This is Git's way
of telling us that there's nothing new in the directory
for it to track (in fact, there's nothing at all in the
directory, but the message would be the same if
nothing had changed).

a file in your editor of choice and save it inside the
hello_git directory.

Lets say we created a file called hello.txt with the
contents Hello, Git!. Now. when we run git status again,
it notices our new file and lists it in a section called
Untracked files;

001 S git status
002 # On branch master
003 #

004 # Initial commit
005 fl

006 fl Untracked files:

007 # (use “git add <file>..." to include in
what will be committed)

008 #

009 # hello.txt

010 nothing added to commit but untracked

files present (use "git add" to track)

On the last line of code above. Git is informing us that
there's nothing to commit, even though we've added
a new file. This is because Git won't track every file in
the directory by default; it is up to us to tell it which
files to track. As the output above states, we are going
to need to use the git add command to tell Git to track
our file.

Commits

The basic unit of change that Git deals with is a commit.
Your basic workflow when working with Git will involve
making changes to one or more files, then committing
those changes to Git. This creates a new commit, with a
unique identifier that allows you to access it later on (for
example, to return your repository to the state it was in
at that commit).

Lets create the first commit for our helio_git
repository. Create a file in the directory with some text
in. If you're familiar with command-line editors like Vim
or nano you can use those, but otherwise simply create

i" MNGW32z/£/Usei^uh/hdk>_git

(urt 'flit help flit' tp display the help index*

tun 'git help <connand>* to display help for specific connands.

.oui^PhOLIl S PC ^O’tloerc/Lcuj.is^hello^siit

i flit status

fatal* Nat a sit rappsitary <or any pF thp parent directories}; *fli

j i.i! n i ■. n LOU J S PC /Mliew/Lfluii/hg 1 la fit

i u it in it

initialized empty Git repository in t:^lfsers^Lotiis/hello_git/'.gity

LouisELCKl 1&-PC /C^Users^Lo«isv ,, hellii_git <nvaster>

$ Bit status

ft bn branch piaster

It Initial connit

nthinfl to commit fcrsato/'copy f iles and use "flit add" to track)

iuuI^ELCNJH PC /C/Vs«Pfi/tiOuis/h«lh_ 9 it €irtastar>

Using git init to initialiser repository and git status to clujCk its status

Creating a commit involves two steps: first, stage the
files you want to commit to the staging area, and
second. commit them.

To stage files for a commit, go ahead and use the git
add command:

001 git add hello.txt

This produces no output but you can simply run git
status again to verify that it worked. Now you'll see the
hello.txt file in the changes to be committed section.

Now that the file is staged, we want to commit them.
Each commit In Git is accompanied by a message
explaining what changes 4 contains. To add the
message, include it in quotes after the -m flag, like so :

001 git commit "initial commit, added the
hello.txt file"

This produces the following output;

001 $ git commit -m “initial commit, added the
hello.txt file"

002 [master (root-commit} 4f73b9S] initial
commit,, added the hello.txt file
003 1 files changed, 1 insertions^), 0
deletions(-)

004 create mode 103644 hello.txt

Git provides a brief description of all the changes that
are contained in this new commit, like how many files
were changed, and how many lines of code were
inserted and deleted.

At any time in a Git repository, you can see a history
of all the commits leading up to your current state by
running the git log command. At the moment, our
repository only has one commit, so running git log only
shows us that commit:

001 S git log

002 commit 4f73b9S9922b0ec6e52a209b95cbd99c9f
2885Se

003 Author: Louis Simoneau <louis^!flippa-com>
004 Date: Sat Jul 14 13:57:02 2012 +1000

005 initial commit, added the hello.txt file

Git uses long alphanumeric strings to uniquely identify
each commit, ours is

4f73b969922b0ec6e52S209b95cbd99c9f2BS58e
(The hash will be different on your machine.) You can
see a shortened version of this string (containing only
the first few characters) in the output from the git
commit command.

You can use the gif show command to display all the
changes made in a given commit by providing its
identifier (the short version works fine here too):

001 S git show 4f73b989922b'0ec6e52S209b95dbd99
c9f28858e

feature

002 commit 4f73b989922b0ec6e528209b95cbd99c9f
?&858e

003 Author: Louis Simoneau <louis@flippa,cotin>
004 Date: Sat Jul 14 13:57:02 2012 +1000

005

006 initial commit, added the hello.txt
file

007

003 diff —git a/hello.txt b/hello.txt

009 new file mode 100644

010 index 0000000 ..670a245

011 — /dev/null

012 +++ b/hello, txt

013 m -0 r 0 +1 @@

014 +Hello ? Git!

Lines preceded with a plus symbol (+) were added in
this commit Lines preceded by a minus 0 were deleted
(our example commit only has one line added, and
none removed), if you make changes to a line. Git will
show you the old version of the line as deleted and the
new version as added, so you can easily compare both
versions to see the changes.

That's all there is to committing changes to a Git
repository; we edit some files, add them to the staging
area with git add filename*, then commit them with git
commit -m "commit message* - .

Then, at any time, you can review the history of your
changes with git log. or review the changes made in a
specific commit with git show ^commit*.

Branching and merging

So far weVe only seen the simplest features of Git
adding files to a repository and committing changes. If
that's all Git was capable of, it probably wouldn't be
worth using. Now it's time to look at Gifs real killer
features: branching and merging.

Git branches allow you to have several versions of
your project side-by-side. For example, if you’re working
on an experimental feature, you can do all that work on
a branch. If you discover a bug in your application that
needs fixing urgently you can simply save your work
on the experimental branch by committing it, switch
back to the main branch, commit your fixes there, and
deploy the fixed code. When you switch back to your
experimental branch, all your work will still be there.

When you're done working on your new feature, you
merge that branch back into the main branch. Git will
automatically combine the changes made on each
branch for you. If there are conflicts - if, for example,
you made different changes to the same line of the
same file in both branches - you can pick which change
you want to keep.

As we noticed earlier, our Git repository is currently
on the master branch: this is the default primary branch
for any repository To switch between branches, you
use the git checkout command, followed by the name
of the branch you want to check out.

Let's create a new branch in the hello_git repository.
To do this, we pass the -b flag to git checkout:

jpdategh pogcs

GitHuCs desktop applications provide a nice visual Interface for working wltn branches

001 $ git checkout -b test_branch

002 Switched to a new branch test.branch 1

The new branch will inherit all the commits of the
branch you're on up to this point. Think of it like a real
branch on a tree, where the bottom of the trunk is
the first commit. The new branch will have ail the
history down to the bottom of the tree, but any new
commits on the master branch (known as the trunk)
won't be visible on the branch, and vice versa. So if you
type git log at this point you'll still be able to see your
initial commit.

To verify that you're on the new branch, you can
either type git status again, or use the git branch
command, git branch will give you a list of all the
branches of your repository:

001 $ git branch
002 master
003 * test_branch

001 S git add goodbye.txt

002 S git ccrnmit - m “add goodbye message''

003 [test.branch lel2B5e] add goodbye message
004 1 files changed, 1 insertions(+)., 0
deletions(-)

005 create mode 100644 goodbye.txt

current branch

_ n x

branches

'*Jg AlttS+rai

| | MuflfiamliflflJMn

Pi P»utjfi*h

►

customer

dew

gh pages

iiiM'c II ti-HUMilWilliStyh'- 1 .

Ryan l4ddM

a +■ v

ModPniifrfCHMnh

u mi

M*fg» pull r#qu««t iili Item

■MI«lKnom«unw

. » L cr

Jul 1J. /

n uivpi

(It 5 IE

ArjHLlfra

S i

Now let's make some changes on our new branch.
Create a new file, called goodbye.txt. with a line of text
in it and commit it

Verify that your new commit is there using git log, then
switch back to master by typing:

001 git checkout master

feature

.85

A CRASH COURSE IN GIT

k nwHttw ■ Fit** LXummif.i

Unmcftfci i

fMp DamVcHH}*

0 Mrrnt * RMftW BTOSt

Aid ttuWby* nwtugv

(L LBtH umi j 0.1. 3J5

0 if

hello_git 1

|ibk*T

B ipni<dbvn* LhI <tli^ jqu

■"U gymfcvw rm«.nng* ft*w»

W italn W 2 days ago

n4kH cbt»tH added iho hoHoM Ik |Ldeh3 5*trwwju|

After p ustiirig our changes* thevH be vlsl ble on GitHub

At this ooini. if vou insert the directory, you'll note that
goodbye.txt is nowhere to be found. That's normal; it's
tucked away on the test_branch branch. If you want,
you can switch back and forth from master to test,
branch to see the file appear and disappear. The same
thing would be happening to the contents of your files
if you had changes to them on a branch. When you
check out a branch, the files on disk will be changed to
match the latest commit on that branch.

Let's say that we're satisfied with the new feature on
test_branch, and we want to incorporate it into the
project. We want to merge the test .branch branch into
the master branch.

Make sure you have master checked out. then type:
001 git merge testjaranch

Now all your changes to test_branch will be brought
over into master. You can verify that ftiis is the case with
git log;

001 $ git log

00 2 commit 1e1285eS96491b77579S7f m 1682a176 L3d
5f74d

003 Author: Louis Simoneau <louis@flippa.com>
004 Date: Sun Jul 15 11:46:52 2012 +1000
005 add goodbye message

006

007 commit 4f73b983922b0ec$e52s?09b95cW99c9f
28858e

008 Author; Louis Simoneau <louis@flippa.com>
009 Date: Sat Jul 14 13:57:02 2012 +1000
010

011 initial commit, added the hello.txt
file

012

013 Remember; when merging, you should start
from the branch you want to merge the changes
into.

GitHub

Okay, now that we have learned how to commit and
review changes* and switch and merge branches, we're
finally ready to start sharing our code with the world,
using GitHub.

We'll first learn how to upload our new repository to
GitHub and keep it up to date with our changes, and
then we'll have a quick look at contributing to some of
the existing projects,

Head over to githiib.com and sign up for a new
account if you don't already have one (GitHub is free for
open-source projects, you only need a paid account if
you want to keep some of your repositories private).
Then locate the link to add a new repository (it’s a little
icon next to your username In the top-right, with a book
and a plus icon] and click iL Enter in the name for your
repository (in our case. he!io_git). and submit the form.

As soon as you've created your repository* GitHub
helpfully provides a page of instructions for setting up a
new repository or uploading an existing one. Jump to

the section titled Existing Git Repo? and follow those
instructions. After entering the directory where your
existing repo lives* there are two more steps: git remote
add and git push -u:

001 git remote add origin git^github.
com:rssaddict/hello_git,git
002 git push -u origin master

In Git terminology, a remote is a version of your
repository that's stored elsewhere. This could be on a
co-worker's machine, on a local server, or somewhere
on the Internet, in this case, it will be hosted by GitHub.

The first command, git remote add. is telling Git that
our repository has a remote* called origin, that lives at
the provided address (this will be different for your
project since it contains your GitHub username.)

The next command, git push, is telling Git to take the
local commit history on the master branch, and send it
to the master branch of the remote named origin
(which is GitHub.) The -u option is only required the first
time you push your changes to GitHub.

When you run the git push command, Git will ask
you for your GitHub username and password. Type
them in. and your code will be pushed to GitHub. You
can see it published on the site by refreshing your
repository page.

Contributing to an existing project

Now that you know now to upload your own projects to
GitHub. it's time to learn how to contribute to other
people's projects. After all* that's exactly what open
source is all about!

Of course* you can't push directly to a project you
don't own - that would be chaos, However* GitHub
introduced the concept of forking - making a copy of a
GitHub repository inside your own account

To fork a project, just navigate to that project's page
on GitHub and click the fork button in the top-right
corner. As an example, let's try forking Modernize Go to
glthub.com/modernizer/mQdernlzer and dick Fork.
After a few seconds, you'll land on your own copy of the
Modernizr repository.

Now you need to download a copy of the repo to
your computer bo you can work on iL Copy the URL
from the box at the top of the page (it will look

something like nttosJ/github.eom/rssaddict/Modemizr,
git) . Open your home directory in the terminal* and
issue the git clone command, passing in the GitHub
URL you just copied:

001 git clone https://github.com/rssaddict/
Modernizr*git

This will copy the entire repository to a directory with
the same name on your machine. You can now make
changes, commit them, and push them back up to
GitHub however you like.

If you make changes that you think would be
valuable for all users of the project, or fix a bug* you can
submit a pull request, which invites the owners of the
repository you forked to incorporate your changes.
There's a pull request button conveniently located at
the top of the page when you're viewing any of your
forked repositories.

Conclusion

Now that youve mastered the basics of Gil and GitHub.
you'll be in a far better position to contribute to
open-source web projects. Not only can you share your
own work with others, you'll also be able to help out the
community by fixing bugs and improving on the work
of those whoVe come before.

Extra reading

This arLide has only skimmed the surface of what's
possible with GiL and if you want to start using it as part
of your workflow you'll have a bit more learning to do.

Here are some of the best places to polish up on
your Git skills;

git help: type git help In your terminal to get a list of
available commands, and git help ^command* to get a
derailed description of the command and all the
available options.

The Git Book: the Git website has an entire book about
Git, available completely for free online. This is a
fantastic resource that goes into a lot more detail about
GiL. qit-scm.com/book.

Git Immersion; Git Immersion is a fantastic online
tutorial that walks you through a series of short
exercises to learn all of Gifs features, from the most
basic to the more advanced, aitimmersion.com-

feature

what does unlimited space look like?

lnnnisErv...bEyond thE clouds

infiniserv

limitless imagination

We’re offering a new take on virtualisation. You think it, we provide it.

Infiniserv’s virtualisation and cloud computing offering provides a fast and totally
flexible solution for your organisation. And it’s fully supported byC4L*s ultra-fast
private network and support that's second to none.

www.inljni5grv.com

< tutorials

| Build a URL shortener with Ruby and Sinatra

Build a URL
shortener
with Ruby
and Sinatra

Make an impact with your brand and
start sharing shortened URLs
generated using your own application

tools I tecli I tniiuis Code editor command'!ine interface
expert Matt Gifford

A s we make our daily dive into the
world of social media, we see
shortened URLs at every turn.
Not only do they provide ljs with
a quick and easy way to share
potentially long URLs that are
prone to being misspelled, they
can also provide marketing
benefits if the domain is brand-specific

in this tutorial we will build our very own URL shortening
service. The application itself will toe built using Ruby and
Sinatra - a small yet powerful addition to the programming
language. Sinatra is a Domain Specific Language CDSU that
helps us create our application in a RESTful manner by
defining certain HTTP actions, and then building the
application to cater for these requests and how it will
respond to them. Unlike other frameworks such as Rails,
Sinatra has no concept of separate models, views or
controllers. Nor doss it have any helper functions to help
you create forms, links or database connections, Wfrat it
does offer you, however, is. a simple way to create some
truly powerful applications.

01 Install Ruby

" - The Installation procedure for Ruby is fairly straightforward. Windows
users benefit from Railsinstalier ( railsin5taller.org) . which will install everything
with ease thanks to the package. We recommend the Ruby Version Manager
(RVM) application, available from rvm.io, which allows us to install and switch
between multiple versions of the language.

0 2 Install Sinatra

To ensure we can run Sinatra applications, we need to Install the
required gems. Open the Terminal window and enter the following code to
install the Sinatra gem. To assist us during the initial phases of building the
application we'll also need to install the gem for shotgun, which is a reloading
development server:

061 > gen install sinatra
002 > gen install shotgun

03 Sinatra template

Although Sinatra can run an application from a single file, larger
projects may require specific directory structures. To help us get started,

download the core template for the project from q Ith ub coim/coldfu mon keh/
URL-Shortener-Template or done It using git In the command line. This
template project has everything we need to build our application.

001 > git clone git://github.oom/coldfurnonkeh/URL-Shortener-
Teinplate.git urlshortener

A First run

Once weVe downloaded the template project files into your desired
location, well run the application. We first need to run the bundle command
to install any required gems that our app needs. Once this has completed,
we'll run the application using the built-in WEBrick server on port 4567.

001 > cd urlshortener
002 > bundle install
003 > ruby application, rb

05 Missing route

Sinatra was kind enough to let us know that we had not added any
routes for the application, and even gave us a simple example to fix the error.
Let's add that example route now, as well as a second route, to create another
page within the application. Restart the WEBrick server to see the results.

001 get V do
002 r, Hello World"

003 end
004

005 get J /hello' do

006 "Vlho shall we say hello to? JF

007 end

Using shotgun

As we saw in the previous step, wo had to restart the server to pick up
the updated code. This is where we can use shotgun instead, which reloads

tutnclaib

rJUietL

tdeveloper;

Build a URL shortener with Ruby and Sinatra

Sinatra ™

DOCUMENTATION

CONTRIBUTE

CODE

CREW

ABOUT

1)7 0.0 1 9)0)./Mall

0 © 117.00.1

Put this in ™* ,i ™

'/hi' do

rfrl • M Ml

^Oorkwi^tnmi tnpTetf*

• Sinatra docu mentation, deta II & and fork-a ble code ca n be fou nd at

www.slnatrartp.com

Sinatra doesn't know thin ditty

Sinatra reporlsmissinq route errors clearly with esta moles or how lofix them

* Running ttie shotgun development server from ttie command-line Is quick
and easy

Thu U RL para mate r has been di splayed d i-ectly into the browser

Wri¬

the code with every request to allow for continuous development. To run
shotgun, simply run the application from the command line below, which will
open on port 9393.

001 > shotgun application.rb

Sending parameters

Lets create a third sample route within our application file, so we can
see how we can pass variables into the URL. thereby creating more of a
RESTfus approach. This route will accept a parameter in the URL and display it
directly in the browser. Browse to http://12ZQj0.1:9393/Matt to see.

001 get J /hello/:name J do
002 J Hello, 1 + params[:name]

003 end

route for the home page in our application. This route checks for the existence
of a URL parameter called url. If it exists* it will send it through to a new
method to shrink it.

001 # root page
002 get r / r do
003

004 if paranis[:url] and not parafis[:url] .empty?
005 generate_short_url (pa rams [: url])

006 else

007 @urls = ShortURL.all;

008 erb rindex

009 end

010

011 end

Build model

Our URL shortening service application will use an SQLite3 database to
store the saved URLs. To manage the control and validation of the values we
will create a model to represent one entity from the database. Create "shorturl.
rb' in the lib folder and add the following code to complete the model.

001 class ShortURL

002 include DataMapper;:Resource

003 property :short_url, String, key; true, unique-index: true,
required: true

004 property :url, Text, required: true

005 property :created_at f Date!Line

006 property :updated_at r DateTime

007 end

09 Root page

With our initial data model complete, let's revise the mutes for our
application. Delete the example routes we added earlier, and add the new

10 Allow posts

We want users to be able to shorten a URL not only by sending a
parameter via the URL and a GET request, trot also by a form POST
submission. Let's add the revised route below the first, if no submission is
made, we will display an index file to show the form and current number of
URLs we have shortened.

001 post 7 F do
002

003 if params[:url] and not paramsL:url].empty?
004 gene rate_short_u rl(pa rams[:url])

005 end
006

007 @urls = ShortURL.all;

008 erb ; index

009

010 end

tutorials

< hi to rials >

| Build a URL shortener with Ruby and Sinatra

Helper methods

To generate our shortened URL we will use helper methods. Add the
following function to the helpers code block. This accepts the long URL
provided by the user, generates the random stnng, saves the information to
the database using the model and builds the new short URL. which we can
use for display purposes later. The code for this step is on the coverdisc.

j " h *4<■ i; ‘ h*it> Lut**’** r bvtn O Cmm ■

mLUv > I liir t
mitt* ttl«n • F*t»

wrl irHMLM

Ni-IK *06*1* fa

itUm J#l5 4J ItTiSiJI [id-ti M Jtl 2 Vf 1im , ft : t».*1.«*

fit I- ntm;// Mhao. co .uk HU-V^lirU:B:iMl:fl BUHff'UTU:&tlMl«

*(!■* , nMwi^ i »i; ■J-tlTU;A[tt«ill JV1J-V-llTUirW

MUlfr

Random string

Our random string for the shortened URL is created by another helper
method. Add this below the previous entry. This will generate a random string
value limited to the total length of characters we send through, which in this
application defaults to five.

001 def rando*i_s thing (length)

002 rand(36**length),to_s{36)

003 end

Build URL

Finally, well add our last helper method, which completes the
functionality to create the short URL, This method will build the revised URL
link, creating a string that concatenates the site URL from the configuration
object and the generated random string. Add this below the other helper
methods in application.^.

001 def get_site_url(short_url)

002 SiteConfig.url.base + shortjjrl

003 end

Track clicks

it may be useful to track or record how many times a shortened link,
has been followed. Create a new model called didttracltrb in the lib directory
and add the following code, which will validatethe properties for the object
and help to manage database transactions for us.

001 class CliCkTrack

002 include DataMapper: Resource

003 property :id r Serial, key: true, unique_index: true,
required: true

004 property :short_url. String, required: true

005 property :url, Text, required: true

006 property :tlicked_at, DateTime

007 end

the content type for the response and set the values of the object from our
model, which has retrieved the data from the database using a getQ method.

Debug params

As we have the Terminal or command-Sine interface open during
I development, we can use this to help us debug and test our application, Add
the following to the application file. This will output any parameters sent to our
application in the Terminal window as they are submitted, which is very useful
for testing expected parameters. The code for this step is on the coverdisc.

Create form

Open views/index.erb from the project files. We'll add the form to allow
users to submit URLs here. We can display the application title, already set in
the configuration object, as well as the current count of generated URLs. The
hO method escapes any unwanted HTML from the URL parameter.

001 <div class-'container^

002

003 <hl><%= SiteConfig.title %X/hl>

004 <p>Currently serving <%= @urls.count %> shortened
links</p>

005 <fonm methods"post">

006 <input type-'text" value-'<S p htparans[:url]) %>"
naiBe=”url" id- J 'url J ' />

007 <input type= JI submit'' valuer's hoc ten” id=”sub(iiit" />

00S </form>

009 <div classF"clear jr ></div>

010 </div>

View results

Below tie form ir views/ ndex.ero. let s row add the code to display
the freshly-created short URL after a successful request. Using a simple if
statement to check for the existence of the variable, we can set the generated
value as both the display text and the href attribute for the anchor tag,

001 <%, If @shortenedURL %>

002 <div cl ass- 1 'result J '>

003 Your shortened URL is:

004 <a href= J, <^ GshortenedLRL %> ,f x%= GshortenedLRL £X/a>

005 </div>

006 <% end %>

View URL

Create a new route in the application file to allow users to follow a
generated link. This route allows for two entry points, both with the shortened
URL in the path. If a matching short URL exists in the database, we’ll log the
visit in the database using the dick track model before we redirect the user to
the original long URL. The code for this step is on the coverdisc.

ftk Expand info

Create a new route that will allow us to expand a shortened URL via an AP$
request to return information about the link as a J5GN object. In this route we set

20 Create test page

Create a new file called application_spec.rb in the spec directory. This will
hold our unit tests for the application, which will help us debug and ensure our
code works as expected- Add the following code into the test file to set up the
dependencies and testing processes. Notice that we require the actual
application file to run the code.

001 require^relative J ../application.rb'
002 require ‘rack/test'

tutorials

r.web-

ideveloper;

Build a URL shortener with Ruby and Sinatra

004 set environment, rtest
005

006 def app

00 7 Sina tra;: Application

008 end

009

010 describe 'URL Shortening Service 1 do
011

012 include Rack: :J est:rMethods
013

014 end

21 Define tests

Mow wo need to add some tests into the document. Place
these tests after the Rack include in the tag block. The description of
each test is cleat informative and written in plain English, which makes
it ideal for anyone to read and understand what should be happening
as it runs.

001 it ‘'should load the home page' 1 do
002 get '/'

003 last.response,should be.ok

004 end

005

006 it "'should pass when a short url is viewed directly"' do
007 get Vjirey'

008 last^response,should be.ok

009 end

010

011 it "should fail when trying to expand a hash that hasnt

been sent 1 ' do

012 get '/expand/"

013 last.response.should.not be.ok
014 end

Mk Running tests

With our test cases written, we can now run the entire test
script against our application to make sure everything is up and
working as it should be. Open the Terminal window and type in the
code below to run the rspec tests. The output and results will be visible
in the Terminal.

001 > rspec spec/applicafion.spec.rb

Code library

In detail

Let's take a closer look at some of the code functions used in this application

Weusethefirst.or.
create method on the
entity only to save the
record if it doesn't
already exist

The site configuration Is
set in environmentub.
You can edit or change
the config object
proper ties here

The Gemfile contains a
list of all gems required
by the application.
Runnlngbundle install
will manage these for us

001 def gener^te_short_url(long_url)

002

003 ©shortcode = random.string 5
004

005 su = 3hortURL,first_or_createC
006 { :url longjurl

007 {

008 ;short.url => ^shortcode,

009 ;created_at => Time,now,

010 :updated_at => Time.now

011 })

020 :author => 'Your Name Can Go

Here',

localhost:4567/' # the url of your

application
©22 )

FILE_)}/lib' 1 ’)

lib/*,rb”) { 1lib| require File.
basename(lib, \* J > }

" sql i te3: / /#{Dl r. pwd}/ shortu rls. db 1H )

end

source f " htt p: // rubygems. org 1

gem

1 sinatra", '>= 1*2*

gem

1 rake 1

gem

1 datajTHpper J , '>= 1.1"

gem

1 dm-core ’

gem

1 dm-sqlite-adapter 1

038

gem

‘dm-timestamps 1

039

gem

‘dm-validations r

040

gem

J dm-aggregates J

gem

'dm-migrations J

042

gem

haml 1

group ;test do

gem

'rspec' r -require =>

gem

'rack-test'

end

tutorials

< tutorials

| An introduction t o the F acebook Graph API

introduction
to the
Facebook
Graph API

A powerful API that allows you to
access the data behind Facebook

toolasllcc:lilirtMicbt Dreamweaver. PHP. MySQL expert Pete Simmons

I | n this tutorial well he recreating elements of
Facebook, under the guise of 'Fakebook 1 .

This practical demonstration will show you
how you can access certain elements of the
Graph API for use on your website. There is
I no real point to recreating Facebook in Its
entirety using the graph, as they seem to be
doing a pretty good job of that themselves!
This is more a convenient way to show you
the basics, so you can pick and choose what
you use for future projects.

in this tutorial we will cover how to set up a Facebook
application, how to authenticate a user on your website,
and how to pull information from the graph to display
on your website.

it is worth noting that Facebook has a tendency to
change API features on a regular basis, so it is worth
keeping up to date with what is going on. via the
Developer Roadmap {found at developers-facebook.
com/roadmapj. Keep a mental note of anything that
you may have coded for future reference, as you may
find that your application suddenly stops working for
no reason. It is unlikely that anything we cover in this
tutorial will change, as the Facebook graph could be
considered a core featu-e of the API.

Set up your application

Navigate to bit.ly/pquEvy and dick Create New App. In the pop-up
box, enter a name for your application and an application namespace. The
namespace cannot contain uppercase letters, numbers or spaces and must
be unique. Agree to the Facebook terms and conditions and press Submit

Your APP ID

You will be taken to your App settings page. At the top of this page you
will see your Application ID and Application Secret. It is important that you do
not surface the Application Secret in any way, including via the page source
code. Make a note of your Application ID. you will need this later.

Application settings

On your application settings page, there are a couple of fields that you
need to fill out with server information - the first is App Domain. Enter the
domain of your website without the HTTP or WWW; this will authorise all
subdomains and directories on your server. .Scroll down and elicit the Website
box and fill in your server details here as well.

Authenticating a user

Now we have our application set up, we need to create a way of
obtaining an access token from Facebook, the Access Token is the key that
unlocks all sensitive data about a user We'H need to redirect our user to a
Facebook authentication page and then push them back to our application.
Copy the code from the disc into a new PHP document.

Adding app variables

You'll notice on lines three and four that our code requires our unique
APP ID and APP Secret. Add these details in from step 2, as well as the domain
on line five and save your PHP page at i ndex .oh p. Running this page now will
redirect you to a Facebook authentication page and ask for permissions. Don't
accept these permissions yet!

Extended permissions

The code we used in step 4 is taken from the Facebook
documentation and only provides us with basic access information. If you had
allowed access in the previous step, you would now need to delete the
application from your Facebook and re-add iLToget access to more in-depth
data, change the Sdiatog.url variable Cline 12? to the following.

001 $dialog_url = "https://www, facebook, codi/dialqg/oauth?cliefit^
id- f . $app_id , '^sccpe-u ser_about_me r use r_act iv i t i es > use r_
bi rthday, user_checki ns f user .groups, u ser_inte rests, use r =

1 ikes , use r_p>hotos h user_status , emai 1 f userJhrtWtGwi&redirect_u r i-'* .
urlencode($my_url) . Jl listate= J \&_SESSION['state' ];

Testing our permissions

Run your code and dick Go to App when prompted, you should be
redirected back to the domain you entered on line 5 of your code, you should
also see a welcome message with your name. You will also have stored an
access_token in the SparamsE'accessJoken'j variable. Delete the echo
command outputting your name and add the following code to see available
user data.

001 print_r($user);

Styling our data

Open the CSS file from the disc and save it to the same folder as your
project, add the foltowing code above our PHP code. This will allow us to
quickly style our information and give you a storting point for the layout of
your project. You'll need to move the session_start to the top of the page.

001 <? Sessions tart Q; ?>

002 dDQCTYPE htinl>

003 <head>

tutorials

rJUietL

tdeveloper;

An introduction to the Facebook Graph API

004 <title>Facebook Graph AFI</tiUe>

005 clink href="style.css"' type="text/css
006 <,/head>

007

Displaying basic information

Now we have everything set lid. it's tine to duI some data aid display
I it The following code will pull in a user's profile picture, print a welcome
I message, and then construct a sentence based on their Facebook data.
Replace your pnnt.r line with the code for this step, which is on the coverdisc.

Getting users likes

Now wc'l connect to a different part ot tic Facebook grapi aid co lect
a list of pages that the user is a fan of. Weil be limiting this list to ten for speed
reasons, but you can display as many as you like. Add the following code
underneath our info div.

001 <div styIe= l 'clear;both‘ , "></div>

002 <div class-'ll kes Jf x?5 $user->first_name ?> likes</

dlv>

003 <ul>

004 <?

005 Hikes = json_decode(f Lle_get_contents( ,J https: //graph,

facebook. com/me/I i kes ?1i mi t=10&access_token=”.tpa rams[ ' acces s_
token']});

006 foreach (Slilces->dota as lvalue) {

00 7 echo 1 <1i> J ,$value->name. 1 </li> 1 ;

008 >

009 ?>

010 </ul>

Making pages clickable

We can go one step further with our list of fan pages, by making them
clickable. To do this we need to know the URL of each page; this information is
not included in the graph data, but the page SD is. We can simply go to

facebook.com/fpage_id] and get to where we need to be. Alter your echo
code to:

001 echo '<liXa href-'http;//facebook r com/ f r $value->id r
target- r, blank r '> J . Ivalue->name. J </ax/li> f ;

Getting interests

Getting a user's nterests is very sinri ar to getting thei- ikes. Add LIie
following code underneath the previous step, to show a list of clickable user
interests. Again these will link through to a fan page based on the page ID.

001 <div class=‘"interesfs l 'x?- $user->flrst_name ?>'s interests</
div>

002 <ul>

003 <?

004 $like$ = json_decodeCfile_get_contents("https://graph,

fa cebook . com/me/ i n te rests ?1 imi t= 10&ac cess_token= ,p . $pa rams [ ' access_
token'])};

005 foreach <$likes->data as Svalue) {

006 echo '<li>'.ivalue->name.'</li>‘;

007 }

008 ?>

009 </ul>

Adding photo albums

The next step for us to add a list of photo albums i.hal. the user has
uploaded. Again we need to connect to a different section of the graph, and
interpret text data and convert it to a clickable image. This image will in turn
lead us into the photo album itself. Add this code under the last step.

001 <div clas s= JI albums" xl= $user->f irst_name ?>'s albums</div>
002 <?

003 lalbums = json_decode{file_get_content5C"hftps://graph,

f a cebook,com/me/albums ?1imlt-G&access Jtoken-',$params["access^
token'])};

tutorials

< hi to rials >

| An introduction t o the F acebook Graph API

p*l# Simmorn

<Lsft>

-A more friendly liter irn5s&age,
showing our profile picture and a

sentence constructed using our data |

»We're now pulling in
a user's likes, and
c licking tnem will
take you to that page

<Lelt>

■ We now iiave the user's latest
six photo albums. You can
cha nge Ih Is I imit af you prefer

<MnW>

■ Now with addled fa ncyEox,
Our images open in a lightbox
overlay complete with captions

Hetto Pot* Simmon*

3L,

• m m ii i i u'

- w iarh w iu w

• As before, we new
have interests displayed
in a clickable list. This is
very similar to likes

004 foreach ($albums->data as Svalue) { 7>

■065 <div cla$S= "albumcove r JF >

006 <a href= ''album r php?id=<?= $value->id ?> jr >

007 cimg src="https://graph.facebook,go«l/<?= $value->id

?>/pictu re? type=thumbnai1&acces5_token=<?- Spa rams [ J access_token J ]
?>“ border- 1 ®" />

008 </a>

009 <div clas£f= lf descriptio«n''><?= $value->name ?x/div>

010 </div>

011 <? } ?>

The

Authentication
process

A! the start of this tutorial,
we pushed our users away
from our application, on to
Facebook. More information
on this process can be
found at bitJy/J 6 HnhG.

Exploring albums

Wc now need to create a new PUP page that wil display all the photos
in a previously clicked album. Open step14a.php from the disc and save it as
‘ album.oho' in your project folder. Under the £user variable add the following
code, this wil pull all thumbnails from an album, and their descriptions.

001 ?>

002 <hixa href="'index.php‘">alt;' Back </ax/hl>

003 <div class="'albums"x/div>

004 <?

005 Salbum = json_decode(file_get_contents( >, https ://

g raph. facebook. cent/". $_GET[" id ’ 3 - J ' / photos?access_
token-".$pa rams [ J acces s_token J 3) );

006 foraach (&jlbum->data as Svalue) { ?>

007 <div class= ''albumcover' r >

008 <img $rc =,, <?= Svalue->picture 1>" border- 1 "0" />

009 <div class=" description''><?- $value->name ?x/div>

010 </div>

011 <? } 7 >

012 <1

15 Adding fancyBox

The next step is to demonstrate how we can integrate the Facebook
graph into a thrd-party tool, like fancyBox. Download the source files from

fancyapps.com/fancybox and add them to the head of your FITML and into
your project folder. Now all we need to do is wrap our thumbnails around a
link like so.

001 <a class-"fancybox” href= J, <7= $value->source 7>"
rel="gallery" title=''<?- $value->name 7>”>

002 <iing src =, "<?= $value”>picture ?> w

border -/>

003 </a>

Comments and Likes

As t stands we currently have the description of the image appearing
twice. We'll amend our code to show the number of likes and comments
under each thumbnail, rather than the description. We can do this through the
following code in our description div.

001 <d i v cl ass= w descri pt ion J ‘x?= count < Sv a 1 u e->l ikes ->da ta)

?> Likes <br /> <?= count (Svalue- >coimients->data) ?>
Comments</ div>

17 Tldyuperrors

Vou may notice that if your image has no likes or comments, your
code will throw up some errors. This happens because the Graph does not
include certain data if there are no likes or comments. To get around this,

tutorials

r ,uieb_

tdeveloper;

An introduction to the Facebook Graph API

change the previous code to include
some isset it conditions.

001 <div cl ass=" descript ion J 'x?
if ( i s s et ( $v alue->1ikes-
>data)) { echo count($value-
>likes->data) ; } else { echo
'0': }?> Likes <br /> <? if
(isset($value-comments- >data> ) {
echo count ($value->CGmments-
>data) ; } else £ echo J 0 J ; }?>
CQininents</div>

Display comments

So we i iove our likes and
comments text in place under our
images, now we want to be able to dick
them and have a fancy Box open with the
comments, for this we’ll use a hidden
mime div, Add tins under our albums div.
Well need to make one more call to the
■graph using the album ID from our
previous foreach loop.

001 <?

002 Salbum.comments

= json_decode(file.get.
contents (" h t tps: / /g raph r foe ebook r
com/ " r $vglue->id, "V?acces5_
token- 1 ", $params['access,
token']));

003 if (isset($album_

comiients->comn»ents->data)) £ ?>
004 <div id="inline" style="

display:none;width:S00px; ">

005 <? foreach (£album_

comments->coiTii]ieints->data as
$value2) ( ?>

006 <h2>Corments</h2>

007 <h3><?- $value2-

>fron->name ?x/h3>

008 <p

class=”coititient"><?= $value2-
>message lx/p>

009 <? } 1>

010 </div>

011 <7 } ?>

One more error

There is one -nore emi fiat may
have passed you by, as it’s hidden in the
source code, if your picture does not
have a caption, it will throw up an error.
Update your img title tag to the following
to get around this. Add an else statement
in here to show No Caption if you wish.

001 title="<? if <Isset(£value-
>naine)) £ echo lvalue->name; }

7>"

Making inlines
unique

If you view source on your page, you will
notice that all of our inline hidden divs
have the same id. This is a problem if we
want to display the contents in a
tencyBox. as each has to be unique, in
order Loget around this, change the div
id=1nline" section to the following:

001 <div id= rt irdir»e_<?= $album-
>datg->id ?>"
style="display:none;
width : 500px; u >

Clickable comment
links

We now need to add links to our album
page to show the comments, we need to
account for the fact that our fNines are
now unique, so don't forget to pass the
ID into your href. This can be done like
so. and needs to be placed inside our
first foreach loop.

001 <div class="description"^

<? if (is£et($value-

>likes->data)) { echo

count(tvglue- >likes->data)

; } else { echo

"0"; }?> Likes
<br />

<? if (isset($value-
>camments->data)) { echo
’ <a class=''fancybox"
href="#inline. ' . $value->id, .
count(£value->camnfients- >data),

" Comnents</a> J ; }

else £ echo '0 Comments ' ; }?>

</div>

Putting faces to
names

Adding the following code into our
second foreach loop will add a user's
profile picture to our comments box. The
image displayed will be the Facebook
square image, meaning we don't have to
resize anything. If you want to, you can
also make their name and picture
clickable as described in Step 11

001<div class= H profile_pic"'>

<img src-"'https://
graph.facebook.com/<?=

$valu e2->from->id ?>/
picture? type=squa re£acces s _
tok-en=<?=Sparams[ "access.
token'];?>"' align=' J top" />

</div>

Code library

The Facebook
authentication process

Well take a look inside the Facebook authentication process to
show you what is happening

The first three lines
define our application
settings from Facebook,
This ensures that the
application Is only
accessed from within
the app domain.

We then move on lo
create a session and
check to see If we already
have a valid $oode set

001 $app_id = HJ ';

002 Sapp.secret = JMJ ;

003 $my_url =

004 session_start () ■

005 $code = $_REQUE5T["code"];

006 if(empty(Scode)) {

007 ijSESSlON[ 1 state ' ] ~

id5(uniqid(randO, TRUE)); //CSRF
protection

008 $dialog_url = "https://www.

If no valid Scode is
found. Hie PHP will
output a <script>
command to redirect the
user back to Facebook.

facebook, com/dialog/<rauth?client,
id="

009 . $app_id . J 'Sredirect_uri= JI

urlencode(S*nry_url) . "Estate- 1
010 . 3_SESSI0N["state"];

011 echQ( J "<script> top.location.

href=" Jf , $diolog.ur 1 , '</

5Cript>");

012 }

013 if($_SESSIQML J state 1 ] S&

(S_ SESSION ['state"]

$.REQUESTC'state 1 ))) £

014 $token_url = "https;//graph,
facebook, com/ oau th /access .token ? ”

015 . "client.iob" . $app_id .

"&redirect_uri= J ' . u rlencode(3ny_url)
016 . "&client_secret= l " . Sapp,

secret . '"&CGde= J " . $code;

017 Sresponse = file_get_

contents(Stoken. url);

018 Sparans = null;

019 parse.strCSresponse,
Sparams);

020 Sgraph.url - "https://graph,
facebook. com/ine? 3 cee$s_tqken= J '

021 , Sparan^raccess.token"];

Once we have our valid
Scode. thecontenls of
the graph ar e decoded
and a welcome message
is displayed.

022 Suser = j son.decode(f i1e_get_

contents(3graph_u rl));

023 echo( J 'Hello J '.$user->name);

024 >

025 else £

026 echoC'The state does not

match. You may be a victim of
CSRF.");

027 }

tutorials

Championing the talents of

Robby Leonardi

web www.rleonardi.com

Current role Digital media designer
Education Graduate of communication design, Pratt Institute
Expertise Photoshop. Illustrator. Flash, HTML. CSS. JavaScript.
ActionScript

Clients Fox. Speed TV, FX NeLworks. myNeLworkTV. and G4
Twitter @rleonardi

Robby Leonardi is a multidisciplinary

designer based in New York City, He does
graphic design, animation, illustration, and
front-end development. Most of his work is
online media projects such as banner ads and
websites, and most of It is for major media
companies. He got into web design simply
because he loves to design and to program,
and he feels there is some sort of excitement
In combining things that require very different
thought processes. Sometimes his work takes
tons of effort, especially when the idea is a kind
of wild; but when he succeeds In building
something in to one complete final product.,
he believes it creates tons of joy too.

As a designer. Leonardi is inspired by the
competition. For him. the design world is a
contest between the designers. Each trying to
better the other by creating a superior design.
He believes this is good because it will
motivate designers to always deliver the best.
Designers need to push the limits to wow the
audience, and it is a major accomplishment for
designers to create new styles that change
design trends set new precedents - something
Leonardi hopes to achieve. He also likens
designers to entertainers. He thinks design
should bring happiness to people, and that
there is nothing more satisfying than seeing a
smile on a clients face when viewing his work.

SMflf VODKA.

Joxjiews.com/Dn-air/war-storJes/index.titmJ

FOX NEWS

search featured topics shows

W a ~-«*r

P Mobile ap p

www.BPggdtv .cQm/DrQarams/pinkS'aU-Qut

www.5kvv.com

T his is Robby Leonard's design
portfolio website. He utilises plenty
of illustration as it is a love of his.

He also uses some animation to
give life to the pages.

Biography page with a dark
theme to represent a night scene.
It also applies car racing motifs to
reinforce the petrol head nature of
the Pmks AH Out experience.

The microsite uses mainly blue
colour to mimic the iconic Skyy
Vodka bottle It also projects a
luxurious look and feel to
represent the Skyy Vodka brand.

This show page uses mainly
brown colour to represent a
middle-eastern warzone. It also
uses war elements to enhance
the storytelling of the show.

The blue colour reinforces the Fox
Mews colour palette. The futuristic
look and feel is aimed to match the
Xbox Kinect brand as an advanced
digital device.

portfolio

independent and job-hungry web designers

portfolio

Andre Weier

web www.N alindes iqn.com

Current role Freelance communication designer,, founder &
creator of Polarfox

Education Diploma in communication design
Expertise Flash. Photoshop, Illustrator, Dreamweaver,
ActionScnlpC. HTML. CSS, SEO

Clients Abandoned Subraumstudio. The Asura, Freikkrchliche
Gemeinde

Twitter @Nalindeslgn

Andre Weier graduated in 2005 after
studying communication design for tour
years at Ruhrakademie in Schwerte (North
Rhine-Westphalia, Germany). Over the years
he specialised in innovative navigation
concepts and entertaining experiences.

One of Andre Weier's works, freikirchliche.
com, became In 2008 a finalist at the
prestigious FlashForward Award for Best
Navlgatlon/Experience with competitors such
as MSNBC and Adobe.

Andre Weier's work was featured in a
number of books like Web Design: Navigation,
The Web Designer's Idea Book, numerous
web design Index books and has won web
awards like the DOPE Award. DesIgnTAXI
award and American Design Award.

In mid-2011 Weier founded Polar fox. a multi¬
platform desktop app that lets you beautify,

save and multi-post images to social networks,
blogs and clouds Including Facebook, Fllckr
and Twltplc (www.PolarfoxApp.com)

The beauty of web design for Andre is the
flexibility and possibility it offers to reach and
get in contact with millions of people.

The reason Andre got into web design was
a desire to design and build beautiful
interfaces, a hallmark of all of his work. His
inspiration comes from his everyday life:
everything he sees helps shape his design. He
also loves to surf, and again, this provides
endless streams of inspiration that are
incorporated into his designs.

Keeping an eye on web trends is crucial for
Andre and it is Plnterest. where he has his own
presence ( pintere5t.com/FQlarfoxApp) and a
site that has been getting a lot of his attention
is w w w.i n d ieq oqo.com

oi jtf wMiBPlarf axapjiiCQm

the-desk.nalindeston.cpm

' driDs.nalindesiqnxQm

7.ED£S^

Polar fox is a free desk top
application that lets you
beautify, save and multi-post
images to a variety of social
networks, blogs and clouds.

Webcam, light, microphone and
mouse action painting
application inspired by
legendary American artist
JacKson Pollock.

Audiotennis is a Pong-esque
flash game which can be played
by making noise into a

microphone, or by scroll iog a

mouse wheel.

Gnjngy style Flash £ XML driven
website for the hardcore and
death metal band The A sura.,
who hail from the Sauerland in
the west of Germany.

Flash-based design portfolio
displayed on a variety of cards
that you can flip, move and throw
with the click, hold and shake of
your mouse.

portfolio

BifMUMffT

Web talent showcase

The Smart Marketing
& Media Group LTD

web www.smartuk.net

Current role Web design arid marketing specialist

Education N/A

Expertise -u II service marketing g rou p, d igital & print
Clients Henry Hunt. Big Green Technology, Colstoun
House, Velvet Mule, Warners
Twitter @TheSmartGroup U K

The Smart Marketing & Media Group has been
supplying Its web design service to advertising
agencies. SMEs, global corporate, and blue
chip companies for over ten years - in the UK
and worldwide. With experience and a fresh
approach to web design. Smart produces
inspirational web-based products. They attract
visitors and return on Investment
It currently resides In a state-of-the-art facility
that is the home of cutting-edge design and
brilliant marketing concepts, all under one roof in
the West Midlands. Whether a client of Smart is
new to the Internet or rebuilding an existing
website, they can be assured of intelligent
solutions to grow their business. All of Smarts
web design is one hundred per cent bespoke,
and is customised to exact client requirements.
Unlimited design revisions ensure that clients are

completely satisfied with the process. Smart
develops bespoke eCommerce solutions and
content management systems, and has been
Independently reviewed and rated as one of the
top web design companies in the world, by the
venerated Which Web Design Company for a
number of years.

As a full-service marketing group. Smart plans
and executes targeted marketing campaigns that
drive traffic to websites. It specialises in a wide
range of proven marketing techniques, inducing
SEO, RPC, email marketing and social media.

Smart prides itself on supplying exceptional
service and market-leading products. This has
lead to a sharp Increase In reseller Interest Smart
also offers other design agencies and resellers
exemplary website design and development
with real profit-making benefits.

CH The Smart office

TV superstar psychic Sally Morgan's
CMS-based website is designed and
developed w«ha shop ladity and events
calendar. It was built in association with her
smash hit TV show on Sky bvmg.

Hamilton Bradshaws CMS website was
developed by The Smart Marketing Group.
The chairman of Hamilton Bradshaw is the
welHknown member of the BBC's
Den, James Caan.

TheEssensuals Hairdressing national
website was built by Smart Essensuals
are a sister company to Toni & Guy. and
Smart created the fresh new lock for the
UK hairdressing giant.

The Smart Marketing Group's
state-of-the-art head office: in
Shrewsbury. It is strategically
positioned in the centre of the Country,
dose to the M6 motorway.

portfolio

NEXT ISSUE

20 PHOTOSHOP
TIPS AND TRICKS

ESSENTIAL
TIPS, TRICKS AND
TECHNIQUES FOR
WEB CREATIVES

jfiwrubrd c&iltnl
uunf HTML4 CSiS jmJ
wMfi nir, pcnfrti ind prrtiwon

RESPONSIVE

PROTOTYPES:

FOUNDATION

Install I the responsive front-end
framework and quickly build flexible and
efficient layouts

CREATE RICH
INTERACTIVE
CONTENT WITH
ADOBEEDGE

Use HTML5 C553JavaScript and
Adobe Edge to build interactive
content that runs on mobile devices
and desktops

NEWS

PORTFOLIO

INFORM ATI 0

CONCEPT

MEMBERS

AWARDS

PROFILE:

BIRDMAN

The insanely talented Tokyo design
agency reveals w hat constitutes good
and bad design

FRIEND-FINDER

WEBAPPPT2

Grab share and update your position
using HTML5 J s gedocation API

Visit the WEB DESIGNER online shop at

imagineshop.co.uk

for back issues, books and merchandise

ALL IN YOUR LATEST

3 DESIGNER

Issue 201 on sale

Thursday 20 September 2012

n^lnwilh

. : ;;

iiii.

immu

=iii£E5J=j

mmm

100

trend map

Lisbon

Searching for creative advances in Portugal’s capital

The stage is set for the
sharing of knowledge

9 Quodis

www.quodisxom

More than a decade old. Quod is happily
works on the web out of its beautiful
co-working space, Liberdade 229, smack in the
middle of Lisbon. Quodls Is also a part of the
growing web community In Lisbon, organising
the monthly meet up Florida After Seven - an
after-work event with a great view, where
like-minded folk can grab a bite to eat and share a
g lass of w I ne wh I le the city ra ces by.

* jSBSL^

4hQuodas

i, Jevdopmenl.

Welcome to Lisbon, an
affordable city where sun,
sand, gastronomy and
architecture come together
on the shores of the Atlantic,
providing a healthy dose of
inspiration to web creatives.
With a small but emergent
web community, the feeling
that there is still plenty of
room to grow serves as a
constant motivation

TV Tot only has the number of web agencies
XN in Lisbon risen recently, the quality of
their work has improved massively as well.
Working out of sun-filled classical offices on
narrow terraced streets, or one of the
several recent co-working spaces, the stage
for a vibrant web community Is set.

Perhaps for these same reasons, a wide
array of community-held events have been
springing up lately. Lisbon currently holds
some of the best LJX OJX Lx) and Design
(Refresh LX) conferences in the International
scene. Healthy Word Press and Drupal
communities, and for the more technically
minded, the first Lisbon JavaScript conference
(LXJS) is held this year, integrated in the first
Lisbon Digital Week. Also, for years now, the
local Telco has organized Codebits, a massive
yearly event that brings together over 800
developers In a three-day 24-hour hack-a-thon.

Mix In a strong entrepreneurial spirit
backed by governmental programmes and
inspiring events such as the SWITCH
Conference, several TEDx and Ignite editions,
and the stage is set for the spiralling effect that
comes from the sharing of knowledge and
quality work,

9 SWAT

www.weareswat.cQm

With a group of specialist developers, each with their own
specific ski I Iset SWAT is able to offer its clients a complete
service. Their work showcases their prowess as pixel-jockies that
can turn a client idea into reality, and push what is possible online
to new heights.

SWAT

Massive

www. itsm a ssive .com/en

As an a ward-winning agency.
Massive I eve re very digital tool
currently available to develop its client
briefs. At Massive the re is only one rule,
and that is to break the rules. This enables
it to push the envelope with the work It
does for the brands in its extensive
portfolio, which Includes some of the
biggest brands in Europe.

weareboq

weareboQ.com/en

Bold design and a strong typographic sensibility
characterises the work of this studio that, since
establishment in 2004, has gained a diverse portfolio of
work. Whether designing for print or the digital space, clients can
be confident that their relationship with we are boq will produce
unique and Innovative design.

V Wiz Interactive

WWW.WIZ.pt
Diverse Is the perfect word
to describe the work that
comes from Wiz Interactive.
High-end, graphic-based, branded
sites rub shoulders with bold
illustration and motion graphics to
create an eclectic range of work that
Inspires others. The team at Wiz fully
understand not only the design
technology they use, but also how to
powerfully apply their skills to each
client brief.

j±/ m & i

i. j .si

Lisbon predates
other European cities
such as London. Pans
and even Rome by
several hundred years

A huge old printing factory that is now returned to the
city. A creative island occupied by corporations and
professionals that the industry serves, it also has
stage for a diverse set of events related to fashion,
publicity, design, architecture and music.

Bruno Abrantes
Web developer

Fundagao Calouste Gulhenkian

www.aulbenkian.Dt

If you have a hunger for art and culture, you must visit
Gulbenkian. Its sprawling corridors house regular
exhibits from global artists, and its concert floor
features an eclectic musical selection. The beautiful
park that surrounds it is perfect for a weekend picnic.

Be hi nd M N A A. there's a wood erf u I ga rden
overlooking the Tagus; grab a book and bathe in the
sun. surrounded by beautiful sculptures and trees.
There's free Wi-R and a small self-service restaurant.
The museum itself is free on Sundays before 2pm.

trend map

101

■web

designer Subscriptions Voucher

YES! I would like to subscribe to Web Designer

Your details

Titfe_First name_

Surna me_

Ad d ress._

Postcod e Co u ntry__

Telephone number,__

Mobile number__

Email address_

Please complete your email address to receive news and special offers

Direct Debit Payment

I UK Direct Debit payment

F will receive my first three issues for just El, I will then pay only E25.15 every six issues thereafter. If, however, I da not
laVe What 1 See, I car cancel at any time.

YOUR EXCLUSIVE READER PRICE 1 YEAR (13 ISSUES)

_ UK £62.30 (Save 20%) \T Europe £70 [T World £60

Cheque

I enclose a cheque for £_

(made payable to Imagine Publishing Ltd)

Credit/Debit Card

Visa [ MasterCard [ Amex I Maestro

Card number Expiry date

11111111111111111 11111

Security number I I I (last three digits on the strip at the back of the card)

Issue number I” I (if Maestro)

Signed_

Date_

Code: PCG200

r Tick this box if you do not wish to receive any promotional material from Imagine Publishing Ltd.

FT Tick this box If you do not wish to rec&ve promotional material from other companies.

Terms and conditions apply. We publish D issues a year. Your subscription will start from the next avaiable
issue unless otherwise indicated. Qrect Debit-guarantee details available on request This offer expires
without notice.

I would like my subscription to start from Issue; I 1 I

Return this order form to:

Web Designer Subscriptions Department, 300 GuiHat Avenue,

Kent Science Park, Sitting bourne, ME9 SGU, or email it to

webdesigtter@servlce>ielpilnaco,ulc

200" issue special

SfiPtuI ftitTicttiac The king ol Q»5 kwAi

Malt Mulleiiweg Erie Meyer

“Flash is dead,
so let’s build a
better internet'*

Patrick Van Kann, R/GA

PLUS

pro tutorials
Soled Nblr
Profile special
Over 10 hours
of video tutorials

FANTASTIC

SUBSCRIBER

OFFER

Subscribe today and
get your first three
issues for only £1

!*• Pay only £4.19 for every future issue
- a 30% saving on the store price
» Free UK delivery to your door

P* Never miss an issue

»* Money-back guarantee

*Terrns & Conditions

This offer entitles new U K direct debit su bscribers to receive thei r
first three Issues for£1. After these issues,subscribers will then pay
£25.15 eve ry six i ssu es. £ ubscri bers ca n canceI this su bsc ri ption
at a ny time. New subscriptions wl llstart from the next availab le
issue. Offer code FCG200 must be quoted to receive this special
subscription price. Details of the direct debit guarantee areavaiiable
on request Offer expires 30 November 2012. Imagine Publishing
reserves the rig ht to lim it th is type of offer to one per household.
Source code: PCG20O
Web address: wwwjmaqine 5 ufa 5 .co.uk/wed
Tel: 0644848 840

Manage your subscription account online at www.imaqinesubs.CQ.uk

ISSUES OF

WEB DESIGNER

FOR JUST

Get your first 3 issues for
just , then save 30%
on the shop price

THREE EASY WAYS TO SUBSCRIBE

1. Online

Order via credit or debit card, just visit

www.imaginesubsxo.uk/wed

and enter code PCG200

2. Telephone

Order by phone. Just call:

08448488413

Overseas: +44 (0) 1795 592 878 and quote code PCG2Q0

3. Post or email

Please complete the form and post it to:

Web Designer Subscriptions,

800 Guillat Avenue,

Kent Science Park,

Sittingbourne, ME9 8GU

Alternatively, scan and email the form to:

webdesigner@servicehelpline.co.uk

Ill association with

0 * * ts Our web-hosting guide is brought to you in association with

Fasthosts, the UK's leading reseller web-hosting provider

* Unlimited websites

• Unlimited bandwidth
» Unlimited web space

■ Use your own brand throughout
»24/7 expert UK-based support

■ No-risk trial - 3 months free

I I-Iostiiig listings

Whether you’re a hosting firm keen to promote your
products or a happy customer who wants a favourite
provider to be listed^ drop us a line with the details!

\ webdesiq ner@imagine-publishinq.co.uk

NAME AND URL

Keep an eye on the latest packages and

deals with our comprehensive list of service providers

1&1

1&1 Internet Ltd.

www.landl.co.uk

161 Starter (Linux)

1&1 Standard (Linux)
1&1 Standard (MS)

1&1 Unlimited (LiriM)
1&1 Unlfnlted ffllS)
Iflrl Business (Linuxi
l&l Business CMS)

0844 3351211 E 2&88 5 GB Unlimited 1,000 / H S S / S S t

G 844 33512 H ££988 50 GB Unlimited 3.000 S S S / S S / X

0844 33512 H £71 .BB 50 GB Unlimited 3,000 / t S S S S S t

0844 3351211 LB 3.88 Unlimited Unlimited 5,000 S S S S S S S t

0844 33512 Tl E 107 B 8 UnSmited Unlimited 5,000 St S / S S S t
0844 3351211 £ 119.88 Unlimited Unlimited Unlimited S S S S S S S t

08443351211 £ 155.88 UnSmited Unlimited Unlimited S t S S S S S t

111XA/ U.U * F 11MphHwl ram Urtteited WfebHosting Pack N/A
I I W© PMOSlJj httDr//1 Tl weblio st.com starter Web Hosting Pack N/A

Budget Web Hosting N/A

Word Press Web Hasting Pack N/A
DrupalWfeb Hosting Pack N/A
Joomla! Web Hosting Pack N/A
asCommerDS Web Hosing Pack N/A
ZenCart Web Hosting Pack N/A
PrestafihopWdbHosttigfeck N/A

£60 Unlimited UnSmited UnSnifled

£30 5 GB 2 GB 10 O

£12

£24

1 GB

5 GB

1 GB

2 GB

100

123-reg

i23netj fwtfttUi-rpaflnnki
123-reg fwwift.m-raftJO.uli>
122-reg f www 1? 3-rpg eg . u k J

Blackfoot Hasting Ltd

BlackroQt Hosting Ltd towMarWnr i lrn iik >
Blndkfnnl Hosting Lid (wwHfcblacIi f aQlg & M k . )
SHscKfoot Hosting Ltd twww.bt Mfcf oP t JC k uli )

Biaamignt tow tHarttninhr rnm?

BiaJtnight tow.fflacKnlaht.com?

Bttwu (btadtir.aMUia.LiKl

SrnvnU rhllpffhriwnUrn nk>

Bf nvn14 { hUPifjfbrTVoU.tP.uk>

0ravo14 f bttPij'j'bravnn, 1 n,uK>

□aiiv Internet tow,.dfllLy.C&lJKi
□ally Internet [ wwtf.dallv.ca.uk3
Daily Internet towflalttmilKl
Qraily inlprnrt tow.do il y . qa u lU.

Starter

PftJS

Pro

Bui Pro
Plus, (MS)

Pro (WSJ
8usPro(WS)

Light Use*
Everyday
Bushess/Pro
JAVA Tomcat
ASP.NeI

Branxe Package
Sliver Package
Cold Package
11tanium Package
Reseller Package
Home

Professional
Minimus
Medlus
Maximus
Starter Linux
SI arl kt Wratows
Bu^vkso. Linux

flu aiKi Windows

Ultimate Linux

Ultimate Endows

Entry

Home

Business

flu mipss Plus

Starter

Home

Business

OEMS 059 0918
OEMS 0590018
0345 3590018
0345 0590018
0345 P59 0013
0845 0590018
0845 0550018
08703212020
0370 321 2020
08703212020
03703212020
0370 221 2020
03451fi6330ft
0845 «S 8306
08451668306
OEMS 166 3506
03451663536
M/A
M/A
M/A
N/A

35359 918 3072

55359 9133072

55359 913 M72

N/A

M/A

N/A

03/51662100
0345166 2100
0345166 2100
03451362100
0344272 9348
0844972 9848
03/4572 9318

E29.38 100 5GB 20

E59.B3 5GB 50GB 500

£107J8B 1000 100GB 750

£179,86 20GB Unlimited 1,000

£59.03 2GB 35GB IDO

£107.88 5GB SOGB 500

£17988 10GB 150G& 1.000

145 20MB 1GB 9

£100 200M3 10GB 15

E27S 500MB 20GB 50

£500 IOOMB 3GB 15

£275 UJOMS 2GB 15

£10 10MB SOOMfl 2

£64.99 20MB 2GB 10

£79,99 SO MS 2GB 50

£119.99 5O0MB 5GB 500

£299.99 1GB 10GB 1,000

£10 5Q0M8 5GB 5

ISO 1GB 20GB 1QO

£100 2GB 10GB 200

£1M 3GB 60GB 300

£45 10GB 200GB Unlimited

E73 2DGB 10O&B Unlimited

E/5 30GB 600GB Unlimited

£130 2.000MB 2.000MB 10

£2£J 2000MB 2000MB ID

£45 4.000M3 4.000MS 4.000

£45 4j000M3 4.000MA 4,000

£60 Unlmiited Unlimited Unlimited

£60 Unlmiited Unlmilted Unlimited

EI9.2B 500MB 5GB 75

£50.90 3GB 30GB 30

£53.94 12GB I50G3 600

£77.91 24GB 250GB Unlfcnilcd

£30 3GB 2DGB 1,000

£10 10GB 5K3B 10.000

£60 Unlttnlted Unlimited Unlimited

/ y

y S

J J

J f

S j

y s

s /

/ / /

/ / y

y y y

S J f

y y J

y y y

/ s /

/ / /

y S J

y y y

y y

/ y

y y

/ y

s s s

y / y

y y y

y y

y J

J J

s /

/ s

v' J

J J

/ /

J J

y /

S J

J J

s /

/ V

/ /

y j

y y

j y

y y

y y y

y y

y /

y y

y y y

y / /

y y y

y / /

y / y

y j

y y

y j

104

hosting listings

In associ ation with

Get your listing highlighted! Contact Richard
O ridiardmst(5)imagine-pubIisIring.co.uk
0 + 44 ( 0)1202586436 hosting listings

Featured host of the month: Blackfoot Hosting www.blackfoot

.co.uk

Offering more reasons for choosing one of the listed providers

NAME AND URL

□nxignvrasp ft
□igilal Gibhon Lid Ch[[o ; .'AfcDiLMpihbon.Dnml
Digital Gibbon Ltd {hMp-.ffdH3ltaintbbon.c-om)
Digital Gibbon Ltd ftutpiflcfcpltalplbbnn.mcn)
Digital Gibbon lm flittrffflfniriUnlhhnn rnrrT'

Oonhost [www.donboat.cayk)
Oonhost fwww.itonhoat.rault')
Donhoat fwwwhnnhmt rnulfl
oonhost (www.donnosi.tauK?
Dcnhoat fwwrfrtnfirwttrmilf)

OnnhnsL Iwww.donhosI.rauk)
tWMHnfl (www.ehosLing.cam)
eHostlng (wwYr.Bhostlno.com)
eHosting twiMK.iabn5UDfl.mniL)
eHostlng tw«rcr.Bhcfitlnn£gni)

Black; loot isan experienced UK-based web-hosting provider
with a proven pedigree In offering hosting and domain name
registration services since 1999. Specialising in Linux-based
servers, housed across three London data centres, Blackfoot promises
24/7 monitoring and a dedicated support team to guarantee uptime

and first-dass delivery. Hosting options are available in five flavours
ranging from the entry-level Home solution for £40 per year, up to
the powerful eCommerce, Professional and Partner packages priced
between £100-200. All come with access to the feature-packed cPanel
control panel for intuitive maintenance.

Glacom 1'bwrw,f]hrnni.L-rjni

Window?, ummfled
Windows Home
dwsipHnxL
PHrscwi.il
Personal Plus
Susineu

Business Professional

Bronze Linux

Gold Linux

Bronze Windows

Gold Windows

Reseller Unix

Reseller Windows

Enterprise

Commerce

Designer

□nvelnper

Elarler

Personal

expert

Virtual

Bronze

Silver

Gold

PtaUnum

Email Only

Essential

Superior

Premium

Starter

Home

eCofrimerce
Business Pro

0344372 9B48
0344372 9B4S
272 MM.dil.
01965 509 990
01865 SB9990
01865 569 590
01365 569 990
0191 261 2252
0191 261 2252
0191 261 2252
0191 261 2252
08452265566
08452265566
0345 2265566
0345 2265566
0345 2265566
0945 226 5566
0944 9994100
08445994100
08449994100'
08449994100
0121 314 4365
01213144365
01213144365
01212144965
02390 249 R23
02380249823
02380 249 823
02380 249 823

HfA

0800 S42 7500

£43

£108

£132

£100

£39999

£469.99

£39.99

£179.99

£119.-99

£259.99

£23.99

£50.88

£95,83

£227.80

£30

£42

£72

£114

£40

£75

EHO

£250

EZ9.99

£54.99

£79.99

£15999

D99

Unlmiited

5GB

Unlimited

100MB

500MB

IQOMB

500M3

Unlmiited

1GB

1GB
Z5GB
5 GB
50GB
200MB
400MB
800MB
1,200MB
1GB
2GB
5GB
10GB
500MB
2.5GB
6.5GB
30GB
100MB

IGl)

5GB

Unlimited

2GB

5GB

2GB

5GB

25GB

Unlimited

2GB

5GB

10GB

40GB

2GB

5GB

10GB

25GB

1GB

30GB

Unlimited

Unlinitnri

2GB

Unlimited

UnUnited

250

500

250

500

250

Unlimited

lOO

200

Personal Standard

0844 583 0777

£5180

5GB

Unlimited

500

Business Standard

0844 583 0777

£95.08

75GB

Unlimited

1,000

Option

Business Premium

0644583 0777

£173.88

50GB

Unlimited

Fasthosts

WDStarter Reseller

0044583 0777

£149-99

20GB

Unlimited

Option

www r f35thQ5t5,cg r yK

Advanced Reseller

06445830777

£199.99

Unlimited

Option

HnnrL InLernel twww.hiar linlHrnet.cp.uk)

Hostwey feiUtexJinstwavrritib)
Hostwaiy (www.hpstwavc&uk)
Hostwaiy {www.hestwav.oo.ykJ

Hnstwny (www.hn5lwa.VJQ.uk)

iCUk www.icukhostlncLcojJk

KUKiimw.iBuiin«ting.muK

Starter Professional

0345 6447750

£29.00

2.5GB

10GB

1,000

Home Professional

0345 6447750

£3999

10GB

50GB

10,000

Business Prolessinnnl

0945 E44 7750

£129.99

UnlknitHd

Unlimited

UnEmlted

Reseller Professional

084S 6447750

£269,99

Unlmiited

Unlimited

LUWmlfed

Silver

08081801080

£79.50

150 MG

3GB

Option

Gold

08081801080

£136.50

300MB

5GB

Option

Gold Plus

0303130 1830

EIB9.50

45DMB

10GB

Option

Platinum

0303130 1830

£359.50

600MB

2DGE

Option

Platinum Plus

0303130 1B30

£599.50

1.2GB

40GB

Option

Email Plus

0909190 1090

£4935

50MB

N)A

N.'A

PrOlrsxInnnl

0945 DM9175

£20

250MB

1GB

nplinn

Advanced

0845 DM 9175

£50

2GB

2KB

ISO

•option

£nterpnse

0845 0069175

£00

2GB

MOMS

Unlimited

option

Professional Plus

0345 DOS 9175

£90

500MB

5GB

IDO

option

Premium Plus

0345 OD9 9175

£150

1GB

12.5GB

500

option

Enterprise Plus

0345 009 9175

UOQ

2GB

20GB

Unlimited

option

healing listings

105

Our web-hosting guide is brought to you in association with
Fasthosts, the UK's leading reseller web-hosting provider
•Unlimited websites * Use your own brand throughout

* Unlimited bandwidth * 24/7 expert UK-based support

• Unlimited web space * No risk trial - 3 months free

I Hosting listings

Keep an eye on the latest packages

and deals with our comprehensive list of sen/ice providers

Discover what an enhanced
listing can do for your
business. Contact Richard on:

O + 44(0)1202 586436

Continued...

NAME AMD URL

KUKw
KUKu

eu* wimliufflrallnara'iR

JAB lweb Hosting toww lahwPhhrwNnn rrm'i
JAB Web Hosting WwnJabwebhiratlnp.aM-i)
JAB Web Hosting ( wtfajabaehh«Hnfl.iMsn)

jab Hnsiing ftyff ff.jabwBlatimllnn rmnl

lcn CmBHJciktQin)

LCN ( www.lcn.cami

ITN ftnawlrnfnrm
LCN ftMwwJgnjoma
LCN ( wwwJgn.jom.1

LCN i' wujuj L-n rnm 1 !

iD Hnsl i <ht Ip:JVIlihfl5C5.Cn.uk>

LD Hn (ht1pJ/lrihflgt5.m,ukl
LD Hosts t nilDj'j 1 1d tlMtjL lOOI kJ

Reseller Windows

Reseller Linux

Reseller Enterprise

Wall - H105

Home -H25

Rfolesalonal- P55

Readier - R25

Reseller - R105

Blog

Starter

Dynamic

Premium

Unfimlled

LD Budget (Linux)

LO Home (Linux)

ID Pro (Limix)

LD Unlimited (Linux)
Windows Home

08450033175
06450033175
0845 0099175
0600 0430153
OSOOQ430153
0800 0430152
OftOO 0430152
0*00 0430153
014-3&J42 4 90
0142B >12 190
D142B >12 190
01428 342 490
D143B 342 490
01436 342 490
07691 235B5B
07631235656
07631 £35656
07691 235B56
07691 235S5B

1QGB

50GB

Unlimited

2GB

Unllrnled

5DO

5.000

20.000

Urtlntfled

l r 000

Ten.plkmrrp^meHi.lernple nelt

Shrmtd- Server Pro

+1310 B41 5500

£64

2GB

tra

1.000

Shansd-Serwer Advanced

*1310 841 5500

£109

5GB

1.5TB

5,000

NameHOG

AlTorcttOio ifrtsrmrt So union*

NameHOG www.namehoa.net

EMAIL ONLY

STARTER

HOMEPRO

BUSINESS

01604212 904

£11.99

£36.99

£59.99

£10999

2.5GB

10GB

25GB

Unlimited

15GB

150GB

Unlimited

Namescp (mviwxkariies.[icijufcl

Startup-Pfcn

0845363 3632

ES3.9B

500MB

5GB

Namexcn (www-nam&ecLiifcl

Busimas

0*45362 3622

£149.99

2,000MB

20GB

100

Business Pies

QS4&J633G32

£83.33

3.000MB

30GB

200

Designer

08453633632

E233 BB

1GB

20GB

200

Namesco (wwwjiamesjauuk)

Designer Plus

0845363 3632

£4 79.85

Unlimited

30GB

Unlimited

NETCSTSRfl

DEVELOPER

0600 0612SOI

£32.09

1GB

Unlimited

500

ONE

0800 0612SOI

£109.99

5GB

Unlimited

1000

RESELLER

0800 0612801

£274.89

Unlimited

1000

Neleetsera www.netceteraxo.uk

VM500 Server

0800 0612801

£300

20GB

Unlimited

2200DC Server

0800 0612&01

£720

160GB

Unlimited

3000DC Server

0800 0612801

£1,200

2x500GB

Unlimited

26Q0QC Server

0800 0612SOI

E1.SOO

2x500GB

Unlimited

Hetplan (WrtWrtglEfan.CP.UlO

Shared 100

02D7 KHMJ 424

£60

WOMB

1GB

PurplePaw fmiwiiiRijriilFnfflriruiJ^
PurplePaw forrm.purolepflW.ia.uHj
PrirplePew fo wdi pi itQle rw* rrmli.l
py j piepjw (ivrtrijurpkiMrt.tja.uk)
Recklex UK fwww.redde^ult.cnmi
RefWex L. < f-.v.vw r : , .'l. |. ■>.. K .carri)
Redttex I IK IWiv nprldpaiifc rnrnl
ShymarNet (^^EHymarteLro.uU
ShvmarNet fo™w.5 hymgr1re Ug,'l»l)

VS'IOO

V5200

V530D

Dedicated Servers

Emae

Play

Plus

Power

R3 Reseller

RhMiw DeiignSlrwLw
RkHHkx Desi^i Eusineia
Rwttax Design Premium
Standard 1
Standard 2

0207 KHJO 424

0207 WOO 424

02071000 424

UiA

M/A

N/A

0*43 269 4625
0*43 269 4625
0643 269 4625
OSOO 321 7780
0800 3217780

£600

£ 1,000

£2,000

£ 2 , 000 +

£16

£59.86

£107.6B

£43

£63

5GB

10GB

15GB

73GB+

WOMB

750MB

2GB

10GB

1GB

10GB

100GB

10MB

20MB

5GB

10GB

50GB

1,50008

1GB

5GB

10GB

50GB

Unlimited

Unlimiled

Unlimited

2GB

/ /

J /

100

Unlimited

100

Unlimited

106

liraLing listings

In associ ation with

Get your listing highlighted! Contact Richard
O ricIiardmst(5)imagine-pubIisIring.co.uk
O + 44 ( 0)1202586436 hosting listings

...

Can you
recommend
your host?

Tweet us today with your
hosting comments and advice

@WebDesignerMag

NAME AND URL

5k ymartiet tvirtW li rf ni.fi tkrf milk"'

SIR AT0 Hosting ( wwi-tr^g hosting
STRATO Hosting {*^^9 lit)

S7RAT0 H curing (ywj »> ^lr.it,n^U.nqcn uk }
57RATQ Hosting ww.v.s.lrato-fe.i,liimcD.uk l

swish Hosting tww.wja.mnsrino rmiy

Twenty HtAi (rtwivlw airly tiflaLcau It?

VARiHOST

VARJHQST

Weis Fusion twww.rtatrfuslon.ca.ulO
WetiFuslon twww.rtetrfu5lon.cauk)

Wet. Wl* CwaajKetHtkmiili)

Web ■VIjt fwww.we hwJr.cn.uk)

Wet- WU ijmw.rtyhwii.Da.ukl

Premium!

Premium 2
STRATO flasIcWeb
STRATO PowfifWeb
STRATO ArivnncrdWnh
5TRAT0 Enterprise Web
1 rial 13 mandhl
Starter
Personal
Plus

MullulU?

0300221 7733
0300 321 7733
0080080070070
0000080070070
00900SO07Q07O
00300S0O7007Q
034-1 9411000
0344 9411000
08449411000
09449411000
09449411000
08445676971

£41.88

E71.9S

£.137.83

Swish Hosting (wwwjwlahhoatlraetyuk)

Windows Hasling

0344567 6-971

£66

Unlimited

■/

Linux Hast Ins

0344 5 67 6971

£66

Unlimited

■f

Swish Hosting (wwwswlshhostlnci.cauk)

aCommerce

08445 87 69 71

£90

Unlimited

SiteBuilder

08445676971

£12

Unlimited

Switch Media fwww.swiLchmwfcn cntnl

Sivi Ich Si rmclnrcl

0151236 9111

£159

1GB

50GB

500

Switch Media hvww.swit-ehnwtj.

Swiich Business

0151236 9111

£249

10GB

150GB

1500

Switch Media Cwww.switrhirtfeJia.cflfn)

Business Pro

0151236 9111

£348.96

20GB

300GB

5000

ukhiyiielhMHimimiii

Parking

0370 765 6364

E52.B3

Z5MB

500MB

Forwarding

0870 7656364

Fran £i5

NfA

500M&

H curing

0870 765 6J64

From £750

Tidy Web Hnstlnq (www.LldVwiebhcHtina.ooi.uk)

Entry

0844 9A4 9100-

£25

100MB

1GB

Unlinked

Tidy Web Hasting (www.tldvmebl'iMtinQ.CAUk)

Home

03443849100

£50

500MB

5GB

Unlimited

lldy web Hosting (www.tldyrtetrfiMtlng.oauK)

HomePro

0344 384 9100

£100

1GB

10GB

Unlinked

lldy Web Hasting (www.tldvrtetrfiMtlna.oauk)

Business

0344 384 9100

£150

2GB

2GGB

Unlinked

Tidy Web Hosting (www.tldviivebhMtina.co.uk)

Busmessfro

0844 8849w»

£250

5GB

50GB

Unlwiited

TwentyHoit fwwwtwPHlvhnsLrmilri

tesIrfS

0845 6410776

£24

100MB

1.S&0MB

SlnndardSS

0945 641 0776

£45

20DM9

3.QDOMB

Busiftess55
Advanced5S
WordPress Basic
WordPress Plus
WordPress Extra
Fusinn Prnlessinnnl
Fusion Business
FUslon Developer
Fusion Reseller
Windows Starter
Windows Professional
Windows SLarter RmkHiy

0345 641 0776
0345 641 0776
02031447057
02081447057
02081447057
09451301302
03451301602
03451301602
03451301602
08443561450
0844 3561450
0944 3581450

£70

£110

£4788

£71,68

£119.60

£107.40

£179.40

£22740

£329.99

£69.95

£149.95

£199.95

500MB

UOOOMB

2GB

4&B

unlimited

5GB

10GB

20GB

7,500MB
15,000MB
10GB
100GB
Unlimited
50GB
150GB
3000 3

Unlimited Unlimited

1GB

4GB

5GB

25GB

100GB

25GB

IOO

200

KK)

Uniamted

1.000

1.5QQ

5.000

Unlimited

too

500

Zen Internet www.zen.cayk

Bronzie (Linux)

0345 050 9000

£4708

2GB

20GB

Sliver (Linux)

0045 050 9000

£95.88

5GB

50GB

Gold (Linux)

0845 058 9000

£143.80

10GB

100GB

Platinum (Linux)

0845 058 9000

E239JJ0

50GB

250GB

100

•f

Reseller (Linux)

0845 058 9000

£479tfifl

150GB

500GB

250

-f

Designer (Windows)

0045 050 9000

£59.00.

2GB

20GB

Developer (Windows)

0045 050 9000

£170100

10GB

100GB

✓

Golden rules to top hosting We identify and explain the key criteria for success...

The best

resources for you

Selecting yuur ideal packages largely
determined by the kinds of resources and quantity
of features you require fncrti your hosting solution.
Key criteria like web space 3*id monthly bandwidth
important for those Services likely to be
subjected to heavy amounts of traffic, which is
why package solutions far enterprise applications
aetypleay miicfi mure expensive. The general
rule of thumb is not to buy more than you need or
underestimate potential requirements..

Competitive
and reliable

The hosting market is big business and
hosting providers do try to drive prices down
in a bid to entice your custom. Use our chart bo
compare costs, but be sure to visit the vendor
websites to teep track of the latest deals, as
they change. Remember that low price should
not always be a deciding factor and that paying
a premium for a more reiable, trusted and
experienced vendor can offer you much better
value fcr money in the long term.

Putting you
in control

Modern hosting is all about giving
customers the power to set up. monitor and

Fantastic
customer support

If all else fails and you need some
extra help to get your hosting track online, then
a commitment to future customer support is key.
Many vendors orfer a service-level agreement
which outline* what you can expect here, however
moat wil be more explicit about whether phone
support is included or email contact is preferred.
Think abdut what you need for peace of mind and
factor good, comprehensive technical support
against the price.

maintain their web space with minimal fuss. Most
commercial vendors crfer access to award-winning
and intuitive control panels that enable you to log
in remotely and intuitively tweak your account,
without the need to relay complicated instructions
down the phone. Be sure to find out from your
potential host as much as you can about the
control panel and request a demo.

hosting listings

107

OFF®

USA

Subscribe now and get

f 7 ISSUES FREE*

The only magazine you need to design and develop stunning websites

TERMS & CONDITIONS

*This is a l JS subscription offer; please dont forget to quote USA5
when ordering. You will actually be charged £60 sterling for an annual
subscription. This is equivalent to $94 at the time of writing. although 1
the exchange rate may vary. Seven free issues refers to the newsstand
price of $14.99 for 13 issues totalling $194.87 compared with $94 for a
subscription. Your subscription will start from the next available issue.
Latest offer is based on newsstand; price of $14.99 per issue com pared
with $723through this offer
This offer expi res 31 Octobe r 2012*

Subscribe now

«' Online

Order by visiting:

www.imaginesubs.co.uk/wed

and enter USA5 to get this exclusive offer!

Telephone

Order by phone, just call:

592878

and quote USAS

m eb designer

Classified Advertising

01202 586419

today, tomorrow and the future For help and advice call free on 0800 6520 444

WEB HOSTING ■ DOMAINS ■ EMAIL ■ DEDICATED SERVERS ■ VIRTUAL SERVERS • RESELLER HOSTING

fastHosts

fasthosts.co.uk

or call 0800 6520 444 0 f IS

Making business work better online

in b \ designer

Classified Advertising

PostcodeAnywhere

The easiest way to add features to your website*

UK & International addressing | Address cleansing
Payment validation | Customer profiling
Store finder

To find out more;

Call; 0800 047 0495

ww w- po stood earay where, co m

To Advertise In

Contact Nick On
01202 586419

nick.marrow@imagine-publishing.co.uk

trade secret

noun {c} -tred si kriht - A secret formula, method, or device that gives one an advantage over competitors.

Low cost address lookup for your website

Buy online from £15 + vax
Eliminate spell i ng m istakes
Reduced abandoned carts

30% reduct io n of keyst rokes entering add resses
Create a professional image for your clients
Simple integration with SDK & working exa mples

For more details visit postcode-softwa re .net or call 084583 82 666

WEB HOSTING

fatmvtsiami

TIB^webhosting.

designers prefer it

1. Personal Support

2. Fully Managed Plans

3. Superior Servers

4. Professional Features

5. Unlimited Addons

FROM

J P Vear

equivalent to

P Month

Tidy Web Hosting is a trading name of Foldings Unmlted

Registered in England & Wales (5935455). All prices subject to VAT. Call; 0344 884 9100

Classified Advertising

01202 586419

Read anything
good lately?

Shop for quality magazines,
books and DVDs from
Imagine Publishing

imagineshop.co.uk i

MAGAZINES BOOKS OVDS DOWNLOADS GIFTS

GO»

COMPILA

« clikpic »

Websites made easy

Clikpic is an easy-touse service
for people who want a website
without the cost and hassle of
setting one up.

With minimal technical expertise
required, you can use our online
admin system and a wide
choice of template designs to
create and edit your own web
site quickly, easily and very
cost-effectively.

* Update or change your site whenever
you want and as often as you like.

* Have as many pages as you like.

* Dozens of style features and options
to customise your site and give it
your own -fool and look.

* Take order$ online.

* Opt to have your own domain name.

Many additional features recently
added with many more to oome

UK web solutions diret

Established 2001

Premium Web Hosting

Our hosting plans come tuith the following features as standard:

* cPanef control panel

# FREE Web applications

* SPAM /Virus protection for email

• Daily backups - multiple restore points

Utilising CloudLinux for rock solid stability and high performance,
your mebsite is in safe hands with us.

from £3*99 per month

a:\

. *

Web Hosting Reseller plans VPS Managed Servers

littp://u kwebsolutionsdirect.co.uk

Visit

gr&at4gjtalinag£ - The official download website of imagine PubUi

Magazines

| J /iPad /iPhone /Android phone / Android tablet /Apple Mac / Windows PC

3&0 Magazine

30 Artist

eBooks Apps

No Disc. No Problem

Many of the files you’re looking for can be
found on the magazine’s website

Imagine digital editions to get the most out of yoU r digital

0 0 editions, be sure to enjoy all of our

are a new and exciting fantastic features, including:

way to experience our ‘ Zoomable text and P ictures
world-leading magazines !

and bookazines. • Take your collection with you

To buy more Imagine digital editions and for the
latest issues and best offers, please go to

www.GreatDigita I Mags.com

mm 3

Vimeo

Logo

The Vimeo logo in 2007
is the same as is in place
today. Although it is no
more than a selected
font, it demonstrates the
power behind a logo as
part of a brand.

vimeo

Everyone oan upload 230nnb of video every week. Free.

Vmrao is ft free and easy service for sharing your videos -mr. fnenas rind family or
people you meet here Join Vrmee now end share your first video today.

Header

The header is simple and
straight to the point. The
colour Ls calming and
engaging. A big logo
ensures that visitors
know where they are and
a couple of salient
messages get the core
principles across.

Three columns

Another new look for 2007 saw a
switch to three columns, This
aflowed more Information to be
presented on screen, and a
more personal experience.

Vimeo

www.vimeo.com

The video sharing site has stuck to its core principles of providing a
venue for filmmakers of all levels, to become the hit it is today

Founded back in 2004, Vimeo is a videosharirg
website that gets its name from a play on the
phrase J video me'. Users can upload, share and
view videos, with a focus on user-made content.

At the beginning of its lifecycle, Vimeo was a
very basic site that was little more than a point to
upload videos. It very quickly developed into a

more coherent and cohesive experience, allowing
users to share videos and interact with other
users. The design was simple two-column stuff
with a colour palette that made it inviting, It has
slowly evolved since the early days, and now has a
contemporary design, over 8 million registered
users and 65 million visits a month.

i I The design style was simple two
column stuff with a colour palette that
made it friendly and inviting ill

114

_style relic

myvpsksufferingagain,

WHAT AM I GOING TO DO?

A123-REGVPS

^ from just £14.99 4

PER MONTH?

THAT'S JUST THE TICKET

s HOORAH!

WITH A VPS FROM 123-REG YOU CAN SCALE UP AND DOWN AS N^DED,

SO WHEN YOUR SITES NEED EXTRA OOMPH IT S JUST A FEW CLICKS AWAY. SPLENDID.

• NOW WITH PARALLELS PLESK11 CONTROL PANEL

• SPECIAL OFFER! FREE 100 DOMAIN PLESK LICENCE

• UK-BASED DATA CENTRE AND SUPPORT

1-12 CORE PROCESSORS vCPU,
1GB-12GB MEMORY RAM
50GB-300GB STORAGE iHDDi

FIND OUT MORE ABOUT OUR VPS AT WWW.123-REG.CO.UKI VPS

PRICE EXCLUDES VAT. TERMS & CONDITIONS APPLY.

1 2 3 -reg

co.uk

RESELL

Cloud Backup
with unlimited storage
to all of your customers

For just £39.95 a month for UNLIMITED customers

30 day money back | White label everything | Instant online setup

H\sedri\se

www.livedrive.com/resellers

Questions? Call 020 3137 6446

t Offer valid for 3 months from publication date. Discount will be applied to all costs at checkout {set up fee, branding fees, annual fee and/or first month fee).

Internet Archive Audio

Featured

Top

Images

Featured

Top

Software

Featured

Top

Books

Featured

Top

Video

Featured

Top

Mobile Apps

Browser Extensions

Archive-It Subscription

Save Page Now

Full text of "Web Designer Magazine 2012 Full Complete Year"

See other formats